html5 在线编辑图片大小,html5画布编辑图片问题

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

Document

canvas

image

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';