html2canvas生成海报-web网站生成海报功能，怎么实现呢用 html2canvas？

h5怎么制作海报?如何通过海报引流?

在一些日常宣传推广营销活动中有一个非常重要的环节,那就是理念的传播,理念可以彰显一个企业的品牌形象、企业文化等众多因素。而海报是企业传播理念比较常用的手段,除了传统意义上说的那种图片海报,H5海报凭借其更加灵活的形式和丰富的内容而越来越受到企业的喜欢,传播理念采用H5海报成为一种新的选择。

人人秀H5海报——功能介绍

使用人人秀代言海报功能,可以在h5中制作海报模板,发布作品后,用户通过上传图片、照片,合成自己的专属海报。

人人秀H5海报——服务优势

用户参与度高、裂变吸粉

人人秀H5海报——应用场景

产品宣传海报:将品牌海报中代言人的位置镂空,让用户上传自己的照片,合成一张海报。人人都是产品的代言人。

书籍、影视代言:镂空名著封面或专辑中人物头像,让用户上传自己的照片,合成属于用户自己的书籍和专辑。

求淘宝全屏海报轮播html代码

/

给你个傻瓜网址,把连接放上,生成就可以了。要别的花样请Q

web网站生成海报功能,怎么实现呢用html2canvas?

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

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

<divid="screenshoot"></div>

<script>

('DOMContentLoaded',function(e){

constqrcode=newQRCode('qrcode',{

text:,

});

();

constcapture=('#capture');

('click',function(){

html2canvas().then(function(canvas){

constctx=('2d');

(('#qrcodeimg'),0,0);

(canvas);

});

})

});

</script>

<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)

})

}

}