canvas 绘制海报-使用html2Canvas生成图片跨域如何处理？

<button id="capture">截屏</button>

<div id="qrcode" style="width: 0; height: 0; line-height: 0;overflow: hidden;"></div>

<div id="screenshoot"></div>

<script>

('DOMContentLoaded', function(e) {

const qrcode = new QRCode('qrcode', {

text: ,

});

();

const capture = ('#capture');

('click', function() {

html2canvas().then(function(canvas) {

const ctx = ('2d');

(('#qrcode img'), 0, 0);

(canvas);

});

})

});

</script>

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)

})

}

}

有做海报素材的网站推荐吗?

1、Chuangkit

Chuangkit()是一个很老牌的在线作图网站了,有超多素材和模板可供挑选,PC端和移动端都可以编辑和使用,非常便捷。(我个人一直都用它)2、Canva

跟Chuangkit一样好用的设计工具,特别是在移动端已经很多年了,操作习惯非常适合移动端的用户,美中不足的一点是模板数量没有Chuangkit多。

3、MAKA

MAKA原本是一个非常好用的H5制作工具,我个人非常喜欢,现在也推出了海报制作的应用,虽然说模板数量上还没有前面两者多,但是强在功能齐全,H5和海报都能搞定。

这三款工具都非常强大,又各有千秋,各选所爱吧!

线上图片简单设计网站有?

canvas

腾讯的一款在线图片设计工具,这个网站提供了各种图片设计的模板工具,你只需要选择一个模板,然后修改文案、调整素材,就可以完成图片的设计,非常简单方便。

点击“模板中心”,你就可以看到各种不同类型的图片模板,有信息图、自媒体、活动推广、营销图四种,可以说种类相当丰富。

MAKA

H5在线创作、海报制作、模板素材设计分享平台,H5已经成为移动端营销的主要方式之一,对于非专业人士来说,常常借助一些H5在线创作平台快速制作H5页面。本期,我们来看看H5在线创作、海报制作平台:MAKA。

对于设计小白来说,在MAKA上可以直接使用平台提供的模板便捷修改,进行二次创作,快速生成自己作品。操作起来也非常便捷,打开MAKA在线编辑器,对选定的精美模板进行替换或修改,鼠标轻轻拖拽即可进行图文替换编辑,还可在模板中添加文字、图片、音乐等元素,创作完成后即可分享。

Fotor懒设计

随着微信公众号、淘宝店、创业公司、自媒体等各类团体的发展,越来越多人开始有了制作广告图、活动宣传图片、文章配图、海报等平面设计需求。但对于设计小白来说,学习PS、AI等专业软件,或者聘请专业设计师,都有一定门槛。

canvas

腾讯的一款在线图片设计工具,这个网站提供了各种图片设计的模板工具,你只需要选择一个模板,然后修改文案、调整素材,就可以完成图片的设计,非常简单方便。

点击“模板中心”,你就可以看到各种不同类型的图片模板,有信息图、自媒体、活动推广、营销图四种,可以说种类相当丰富。

MAKA

H5在线创作、海报制作、模板素材设计分享平台,H5已经成为移动端营销的主要方式之一,对于非专业人士来说,常常借助一些H5在线创作平台快速制作H5页面。本期,我们来看看H5在线创作、海报制作平台:MAKA。

对于设计小白来说,在MAKA上可以直接使用平台提供的模板便捷修改,进行二次创作,快速生成自己作品。操作起来也非常便捷,打开MAKA在线编辑器,对选定的精美模板进行替换或修改,鼠标轻轻拖拽即可进行图文替换编辑,还可在模板中添加文字、图片、音乐等元素,创作完成后即可分享。

Fotor懒设计

随着微信公众号、淘宝店、创业公司、自媒体等各类团体的发展,越来越多人开始有了制作广告图、活动宣传图片、文章配图、海报等平面设计需求。但对于设计小白来说,学习PS、AI等专业软件,或者聘请专业设计师,都有一定门槛。

Fotor懒设计提供了适用于各种尺寸和应用场景的设计模板,包括国内外的主流社交媒体配图、电商平台配图,以及各种广告banner、朋友圈邀请函、海报设计等。

用户可以根据设计需求,选择所需尺寸,然后从Fotor的海量模板素材中挑选合适的进行设计。

图帮主

图帮主是一款满足大众设计需求的一款便捷在线设计神器,对于菜鸟来说可以很快的就上手了。图帮主适合众多行业、多个场景,可以帮助用户轻松上传自己的图片,拖拉拽、秒出图,5分钟即可搞定设计。

做海报,素材有什么好的免费网站呢

可以自行搜索:在线制作海报,搜索到相应的在线制作海报的网站,在这些网站上直接制作,也可以选择如DesignEvo(一款在线免费制作的设计软件)之类的软件,在线制作。