简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - html5画布编辑图片问题
ringa_lee
ringa_lee 2017-04-11 13:01:55
0
1
383

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

ringa_lee
ringa_lee

ringa_lee

全部回复(1)
小葫芦
小葫芦2017-04-11 13:03:55 1 楼

实现思路：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>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！