H5的img标签可以在手机端自动保存,但是我需求是这样子的,一张图片上有优惠码,可以点击复制,有合成的照片,长按要整体保存。所以就用了canvas图片合成的功能。
绘制之前,我们先了解下canvas的绘制图片方法。
HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型:
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
第一个参数image可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值;dw和dh是image在canvas中即将绘制区域(相对dx和dy坐标的偏移量)的宽度和高度值;sx和sy是image所要绘制的起始位置,sw和sh是image所要绘制区域(相对image的sx和sy坐标的偏移量)的宽度和高度值。
下面开始上代码
drawimg() {
var that = this;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 624;//canvas画布的宽度
canvas.height = 1103;//canvas画布大小
var img1 = new Image();
img1.crossOrigin = "";//解决跨域
img1.src = 'http://morefun.image.alimmdn.com/neateest/background.png'
img1.onload = function () {
//把图片画到canvas上
ctx.drawImage(
this, 0, 0
);
var img2 = new Image();
img2.crossOrigin = "";
img2.src = "http://morefun.image.alimmdn.com/youmai/xuxu/photo.png"
img2.onload = function () {
ctx.drawImage(
this, 12, 12
)
//canvas写入文字
ctx.font = "bold 44px 方正粗圆简体";
ctx.fillStyle = "#890a0a";
for (var i = 0; i < that.promocode.length; i++) {
ctx.fillText(that.promocode[i], 40 + i * 37, 997);
}
that.canvasimg = canvas.toDataURL("image/png")//此时的路径是base64格式,ios可以直接长按保存,但是在安卓上就要把base64格式转为url就可以了
}
}
这样一个canvas就绘制好了。