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

先看效果

使用工具 html2canvas

js 复制代码
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.contentRef
        html2canvas(drewPoster, {
          dpi: 300, //解决生产图片模糊
          useCORS: true,
          allowTaint: false,
          logging: false,
        }).then(function (canvas) {
          that.imageUrl = canvas.toDataURL("image/png");
          that.imgShow = true
          Toast.clear()
        })
      })
    },
// 但是因为前端中有img标签导致画的时候跨域了

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

js 复制代码
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;
    }
  • 页面中对应图片地址
js 复制代码
 getReplaceImg(url) {
      if(!url) return
       if (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 里面配置代理
js 复制代码
     proxyTable: {
      '/wechat_image': {
        target:'http://localhost:8070',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }

但是遇到个坑

js 复制代码
https://s-f-uat.jetour.com.cn/2024-12-26/1735204221531/u=4293302727,535734201&fm=26.jpg


图片中有fm 导致解析图片一直有问题  fm会作为参数去请求导致有问题  有方法解决了麻烦告知下
相关推荐
友友马16 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱17 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌17 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静18 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿18 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_18 小时前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊18 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio18 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao19 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术19 小时前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap