Vue + html2canvas 生成海报

Html:

<div class="record"><!-- 如果没有生成过海报，则先拼接成海报样式展示 --> <div v-show="!imageUrl || (imageUrl && !isImageLoaded)" class="poster-preview" id="poster-preview"><!-- 内容自定义， 需要在海报各元素加载完成并使用base64格式进行生成海报 --> <img crossOrigin='anonymous' @load="loadBackground" class="display-image" :src="recordBackgroundPng" /><img crossOrigin='anonymous' class="record-detail-logo" @load="loadLogoPng" :src="logoPng" /><div class="val other-val">{{targets[2].target}}</div></div><!-- 如果生成海报完毕，则显示图片，长按可保存 --> <img v-show="isImageLoaded" @load="loadImage" class="record-image" :src="recordSrc" />
</div>

JS:

async created() {this.convertImageToBase64();this.$nextTick(() => {setTimeout(() => {this.generatImage();}, 1000);});
},
watch: {imageUrl: {handler() {this.setImageSrc(this.imageUrl);},},
},
convertImageToBase64() {UploadUtil.getBase64(RecordBackgroundPng).then((pngData) => {this.recordBackgroundPng = pngData;});UploadUtil.getBase64(this.images.LogoPng).then((pngData) => { this.logoPng = pngData; });},
generatImage() {this.timer = setInterval(() => {// 设置定时器，等图片加载完成才可以进行canvas绘制，否则有可能海报不完整if (this.isLogoPngLoaded && this.isRecordTopPngLoaded) {clearInterval(this.timer);const div = document.getElementById('poster-preview');html2canvas(div, {useCORS: true,allowTaint: true,}).then(async (canvas) => {const key = `image/poster${getFileNameUUID()}.png`;const file = this.canvasToFile(canvas, key);const img = [{ key, file, src: window.URL.createObjectURL(file) }];try {const imagesInfo = await uploadService.uploadFiles(img);this.imageUrl = imagesInfo[0].fileUrl;this.saveImageUrl();} catch (error) {console.log(error);}});}}, 1000);
},
async saveImageUrl() {await api.saveImage({ imageUrl: this.imageUrl });this.setImageSrc(this.imageUrl);
},
setImageSrc(url) {if (!url) return;UploadUtil.getBase64(url).then((res) => {this.recordSrc = res;this.$forceUpdate();});
},
canvasToFile(canvas, fileName) {const uricode = canvas.toDataURL('images/png', 1.0);const blobs = UploadUtil.urlToBlob(uricode);const file = UploadUtil.blobToFile(blobs, fileName);return file;
},

Util：

import Compressor from 'compressorjs';// 当使用uploader元素 比如<van-uploader /> 可以先压缩
function beforeRead(file) {return new Promise((resolve) => {// eslint-disable-next-line no-newnew Compressor(file, {quality: 0.6,convertSize: 2000000, // png超过2MB则转为jpegsuccess: resolve,error(err) {},});});
}function urlToBlob(dataURL, specificContentType = null) {const BASE64_MARKER = ';base64,';if (dataURL.indexOf(BASE64_MARKER) === -1) {const parts = dataURL.split(',');const contentType = specificContentType || parts[0].split(':')[1];const raw = decodeURIComponent(parts[1]);return new Blob([raw], { type: contentType });}const parts = dataURL.split(BASE64_MARKER);const contentType = specificContentType || parts[0].split(':')[1];const raw = window.atob(parts[1]);const rawLength = raw.length;const uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; i += 1) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], { type: contentType });
}function blobToFile(theBlob, fileName) {theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;
}function getBase64(url) {return new Promise((resolve, reject) => {const image = new Image();image.setAttribute('crossOrigin', 'anonymous');image.onload = () => {const canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext('2d');context.drawImage(image, 0, 0, image.width, image.height);const quality = 0.8;const dataURL = canvas.toDataURL('image/png', quality);resolve(dataURL);};image.src = `${url}?time=${new Date().valueOf()}`;image.onerror = (error) => {reject(new Error('Image stream is abnormal'));};});
}export function getFileNameUUID() {const s = [];const hexDigits = '0123456789abcdef';for (let i = 0; i < 36; i += 1) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);}const uuid = s.join('');return uuid;
}export default {beforeRead,urlToBlob,blobToFile,getBase64,
};

Vue + html2canvas 生成海报相关推荐

用vue PHP实现海报设计功能,有关vue html2canvas生成海报功能的实现
这是我第一篇简书文章,作为一名前端,而且现在电商比较流行的情况下很多电商公众号商城都用到了生成海报图片长按保存到相册然后可以转发给好友或者分享到朋友圈在Web前端中,生成图片非Canvas莫属 ...
前端生成海报图：html2canvas 生成海报图/网页html转图片
html2canvas 生成海报图 <html><head> <title>生成海报图Demo</title> </head><bod ...
h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
html2canvas生成海报的各种问题
html2canvas (一)官网下载安装 (二)基础用法 (三)生成海报问题 canvas高分屏下的模糊问题 html2canvas图片模糊问题 canvas图片getImageData,toDat ...
php html生成海报jpg,html2canvas 生成海报
应用场景移动端H5 分享海报安装html2canvas 插件 npm install --save html2canvas Vue中使用 // 在Vue页面中引入 import html2canv ...
html2canvas手机黑屏,html2canvas 生成海报图开发中遇到的问题
ios里,生成的图片不显示 canvas.toDataURL('image/jpeg', 1.0) 使用image/jpeg格式,在指定图片格式为 image/jpeg 或 image/webp的情况 ...
uniapp中，H5端使用html2canvas生成海报
项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以.最后解决方案是,把网络图片全部转成base64展示 ...
js常用插件(三)之html2canvas生成海报
js常用插件之html2canvas截图生成海报欢迎点击: 个人官网博客先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/aja ...
uni-app 使用html2canvas生成海报，一步到位
ps: 如果图片存在跨域问题,请现在后台配置解决图片跨域问题; app不能操作dom,所以app使用renderJS处理示例在最后步骤分为三步 1.安装html2canvas npm i html ...

Vue + html2canvas 生成海报

Vue + html2canvas 生成海报相关推荐

最新文章

热门文章