h5 生成海报图,绘图操作(html2canvas)

  • 需求:将后台返回的内容,前端拼接成一个整体的图片(模仿截图的效果)
  • 解决:html2canvas插件,截图操作
  • 插件下载:链接:https://pan.baidu.com/s/1g0aUR5J8DkCt0EO1xyZnnQ 密码:6q1o
  • 开始使用:
1. script引入文件
2. html2canvas(content, {    //content是将要截图的div元素
        scale: 2,
        logging: false,   //在console中输出信息
        useCORS: true   //允许跨域(但是个人觉得这个参数设置的没用)
        //allowTaint: boolean,   //允许跨域 和 useCORS不能一起使用
        //background: string,
        //height: number,
        //width: number,
        //proxy: string,   //代理地址
        //timeout: number   //超时时间
    }).then(function(canvas) {
        let dataUrl = canvas.toDataURL()
        console.log(dataUrl)
    })
  • 跨域!!!(敲黑板,划重点)
    1. 很多开发同学都会被canvas的跨域给折磨疯掉,网上说的crossOrigin属性设置成Anonymous就可以跨域,额。。。,其实并不可以的!!!
    2. 正确的做法:
      • 1)让后台开发人员解决跨域问题(但是有些局限,因为后台的图片有些是从第三方网站直接获取到传给前台)
      • 2)让后台传给前端的图片地址,转成base64格式,你接收到base64格式之后,需要在头部加上data:image/png;base64,然后赋值给src属性,跨域解决(推荐)
  • 《完》

你可能感兴趣的:(h5 生成海报图,绘图操作(html2canvas))