canvas生成海报-推荐一款Vue 生成海报的插件vue-canvas-poster

另外,

img 标签和 js 中的image 都建议增加 crossorigin = "anonymous" 属性

**注意: **有部分网友评论('crossOrigin', 'anonymous') 必须是写 在你赋值 之前,所以楼主写法有误 可以看看这个链接 去看看, #27260385

效果图如下:

模糊在线demo

解决方案:

1.首先一样,获取 Canvas 对象:

2.获取像素比,将 Canvas 宽高进行放大,放大比例为:devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。

3.按实际渲染倍率来缩放canvas。

注意基础知识点:

要设置canvas的画布大小,使用的是 和 ;

要设置画布的实际渲染大小,使用的 style 属性或CSS设置的 width 和height,只是简单的对画布进行缩放。

4.绘制

效果图如下

优化后不模糊的在线demo

参考链接:

一个关于image访问图片跨域的问题,

解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported,

解决 canvas 在高清屏中绘制模糊的问题,

简单粗暴,无需多想!!

1.npm 安装vue-canvas-poster

本文链接:

1.出现跨域的情况

这种情况只会出现在html2Canvas需生成的海报中的图片与当前环境不在同一个域下

2.解决方案

处理跨域,将接口返回的url处理为base64再进行处理或者后端直接返回base64

3.如何将url转换为base64?(利用canvas的toDataURL属性将url转为base64)

function getImageBase64Data(imgSrc) {

function getBase64(img) {

let canvas = ("canvas");

 = ;

 = ;

let ctx = ("2d");

(img, 0, 0, , );

let dataURL = ('image/jpeg');

return dataURL;

}

let baseUrl = new Promise(function (resolve, reject) {

let image = new Image();

 = '*'; // 图片处理跨域

if (('data:image/jpeg;base64') > -1) {

 = imgSrc + '?v=' + (); // 处理图片从缓存获取

} else {

 = imgSrc;

}

 = function () {

let imageBase64Data = getBase64(image);

resolve(imageBase64Data);

}

});

return baseUrl;

}

4.使用html2Canvas生成海报

const download = () => {

let content = ('promote-content');

if (content) {

html2canvas(content, { useCORS: true, allowTaint: true }).then(res => {

const imgBase64 = ('image/jpeg');

let link = ('a');

 = 'none';

 = imgBase64;

('download', name + moment().format('YYYYMMDDHHmm'));

(link)

();

(link)

})

}

}