记录一次前端绘画海报的过程及遇到的几个问题

先看效果

使用工具 html2canvas

import html2canvas from 'html2canvas'// 绘画前的内容  我就不过多写了<div class="content" ref="contentRef" v-show="!imgShow"><img :src="getReplaceImg(friendObj.coverUrl)" alt="" class="topImg">
</div>//  canvas 绘画后的东西<div class="content padding0" v-show="imgShow"><van-icon name="cross" class="vanCross" @click.stop="clickDelete"/><img :src="imageUrl" alt="" class="bigImg"></div>//对前端html内容进行绘画
onLongPress(){setTimeout(() => {//生成图片let that = this;let drewPoster = that.$refs.contentRefhtml2canvas(drewPoster, {dpi: 300, //解决生产图片模糊useCORS: true,allowTaint: false,logging: false,}).then(function (canvas) {that.imageUrl = canvas.toDataURL("image/png");that.imgShow = trueToast.clear()})})},
// 但是因为前端中有img标签导致画的时候跨域了

解决跨域方法1 用 images.weserv.nl 公共图片库

if (process.env.NODE_ENV === 'prod') {return url.indexOf('sss.bd.com.cn') !== -1 ? url.replace(/^(http)[s]*(:\/\/)/, 'https://images.weserv.nl/?url=') : url} else {return url.indexOf('sss-uat.bd.com.cn') !== -1 ? url.replace(/^(http)[s]*(:\/\/)/, 'https://images.weserv.nl/?url=') : url}

解决跨域方法2 前端自己做跨域设置 通过wechat_image做代理访问跨域的图片

vue项目     default.conf  配置 nginx 配置location /wechat_image {#proxy_set_header Host "$arg_host";proxy_set_header Referer "";resolver 114.114.114.114;proxy_pass $arg_url;}

• 页面中对应图片地址

 getReplaceImg(url) {if(!url) returnif (process.env.NODE_ENV !== 'development') {const baseUrl = `${ process.env.VUE_APP 自己项目的域名  }/wechat_image`const newUrl = `${ baseUrl }?url=${ url 实际图片地址}`return newUrl}// https://sss-uat.bb.com.cn/wechat_image?url=https://s-f-uat.jetour.com.cn/2024-12-26/1735204221531/u=4293302727,535734201.jpg},

• 前端本地想看效果需要在vue.config 里面配置代理

     proxyTable: {'/wechat_image': {target:'http://localhost:8070',changeOrigin: true,pathRewrite: {'^/api': ''}}

但是遇到个坑

https://s-f-uat.jetour.com.cn/2024-12-26/1735204221531/u=4293302727,535734201&fm=26.jpg图片中有fm 导致解析图片一直有问题  fm会作为参数去请求导致有问题  有方法解决了麻烦告知下