问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

html5画布编辑图片问题

头像
向日一说
    25766888

    就是上传图片，然后预览生成data:image/jpg...那样路径的图片。应该是html5生成的。
    然后想在这个图片下面加个文字，然后再生成图片出来。
    想问怎么做？有实例参考好哈，谢谢了！

    html5javascript
    阅读 3.8k
    1 个回答
    得票最新
    头像
    叁千世界
      1k1110
      ✓ 已被采纳

      实现思路：base64Image -> 导入canvas -> 添加水印 -> 生成base64Image

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<fieldset>
    <legend>canvas</legend>
    <canvas id="canvas"></canvas>
</fieldset>
<fieldset>
    <legend>image</legend>
    <img src="http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb" alt="" id="xxx">
</fieldset>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 256;
    canvas.height = 256;

    var image = new Image();
    // 引用外部图片，需设置 crossOrigin 属性，否则 toDataURL 调用异常
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = function (){
        context.drawImage(image, 0, 0);
        context.font = '16px Arial';
        context.fillStyle = '#fff';
        context.fillText('水印文本 - 火影忍者', 105, 245);
        context.beginPath();
        context.lineWidth = 10;
        context.strokeStyle = '#ff5900';
        context.moveTo(0, 0);
        context.lineTo(256, 0);
        context.lineTo(256, 256);
        context.lineTo(0, 256);
        context.lineTo(0, 0);
        context.stroke();
        // 最终生成的图片 base64 字符串
        var base64Image = canvas.toDataURL();
        document.getElementById('xxx').src = base64Image;
//         console.log(base64Image);
    };
    // 将 src 换成 base64 字符串
    image.src = 'http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb';
</script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      被 1 篇内容引用
      推荐问题