将URL图片链接转换成base64

野性酷女 2024-04-17 05:38 70阅读 0赞

在使用html2canvas截图的时候，canvas重新渲染的时候 ，如果资源是URL图片的时候，在请求有个延时可能还没渲染完就完成绘制了，造成图片截图不出来。  
这时将URL图片转换成base64后，用base64渲染img图片，这样就可以完美解决问题  
如何将“跨域图片”转换成base64呢？原理很简单，将img绘制成canvas，再将canvas转换成base64的img流。  
具体代码

this.getBase64Image('http://wwww.test/test.png', 'coopCachetImg')
       第一个参数是图片的URL地址，第二个是转换成base64地址后要赋值给的img标签
        getBase64Image (url, ref) {
          var that = this
          var image = new Image()
          image.src = url + '?v=' + Math.random() // 处理缓存
          image.crossOrigin = '*' // 支持跨域图片
          image.onload = function () {
            var base64 = that.drawBase64Image(image)
            that.$refs[ref].src = base64
          }
        },
        drawBase64Image (img) {
          var canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          var ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)
          var dataURL = canvas.toDataURL('image/png')
          return dataURL
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关将URL图片链接转换成base64

使用html2canvas截图的时候，canvas重新渲染的时候，如果资源是URL图片的时候，在请求有个延时可能还没渲染完就完成绘制了，造成图片截图不出来。这时将...

野性酷女/ 2024年04月17日 05:38/ 0 赞/ 71 阅读

相关 python将图片转成base64

import base64 def image_to_base64(image_path): with open(image_path

港控/mmm°/ 2024年03月22日 17:02/ 0 赞/ 58 阅读

相关 java 将base64字符串转换成图片

package kf.ats.gvnsvr.client.taizhou.common; import java.io.OutputStream; im

àì夳堔傛蜴生んèń/ 2024年02月19日 21:59/ 0 赞/ 43 阅读

相关 PHP将网络图片转为base64,PHP将图片转换成base64格式的优缺点

这篇文章主要介绍了关于PHP将图片转换成base64格式的优缺点，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、图片转换成base64格式的优缺点 1.

ゝ一世哀愁。/ 2023年01月13日 04:03/ 0 赞/ 203 阅读

相关将图片转换成Base64

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年07月13日 11:09/ 0 赞/ 242 阅读

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 428 阅读

相关 android 把图片转换成Base64字符串

import java.io.ByteArrayOutputStream; import java.io.File; import java.io.Fi

柔光的暖阳◎/ 2022年05月13日 00:16/ 0 赞/ 286 阅读

相关将图片转成base64格式

将图片转成base64好处是减少页面的http请求,个人建议用在那种多页面用同一张比较小的图，因为大的图转码生成的字符串编码会很长,写入页面影响页面的可读性，不怎么方面后期的调

偏执的太偏执、/ 2022年03月22日 15:47/ 0 赞/ 407 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 1032 阅读

相关将图片转换成base64

data:图片类型;base64,图片二进制Buffer.toString('base64') 图片类型可以使用mime库根据图片后缀进行转换 ba

r囧r小猫/ 2021年07月24日 20:43/ 0 赞/ 744 阅读