img图片的预览和下载（iframe基本使用），图片转file格式，file文件转base64格式，base64的编码和解码_img预览图片

一、根据后端接口返回的URL下载和预览图片

1、调用下载图片函数实现下载图片

 // 下载图片
 * imgsrc  图片地址
 * name 图片下载后的名字【包含图片后缀】 如"a.jpg"
function downloadIamge(imgsrc, name) {
    //下载图片地址和图片名
    var image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function() {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      var context = canvas.getContext("2d");
      context.drawImage(image, 0, 0, image.width, image.height);
      var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
      var a = document.createElement("a"); // 生成一个a元素
      var event = new MouseEvent("click"); // 创建一个单击事件
      a.download = name || "photo"; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    image.src = imgsrc;
2、弹出另一个页面，实现预览图片。
 
// 第一种
function previewImg (imgsrc) {
	window.location.href = imgsrc;
// 第二种
function previewImg (record) {
	let record.urlPath = '图片的url地址'
    let record.tzName= '网页打开显示的名称'
	let newWindow = window.open('')
    newWindow.document.body.innerHTML = '<img src="' + record.urlPath + '" alt="">'
    newWindow.document.title = record.tzName
3、不弹出另一个页面，实现下载/预览图片（iframe方式）
 
<template>
  <span class="eye" @click="eyeImg(record)"><a-icon type="eye"/>查看</span>
  <span class="download" @click="downloadImg (record)"><a-icon type="download"/>下载</span>
  <iframe style="display: none;" :src="downUrl" frameborder="0"></iframe>
</template>
<script>
export default {
  data () {
    return {
      downUrl: ''
  methods: {
    downloadImg (record) {
      this.downUrl = record.urlPath
</script>
4、动态创建iframe，实现下载图片。
 
downloadPhoto = () => {
	const { photoUrl } = this.state;
	let elemIF = document.createElement('iframe');
	elemIF.src = photoUrl;
	elemIF.style.display = 'none';
	document.body.appendChild(elemIF);
5、iframe基本使用
 
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    .flexbox {
      display: flex;
      height: 100vh;
      width: 100%;
    .leftbox {
      width: 200px;
      background-color: #ffcccc;
    .rightbox {
      flex: 1;
      background-color: skyblue;
  </style>
</head>
  <div class="flexbox">
    <div class="leftbox"></div>
    <div class="rightbox">
      <!-- iframe属性：src显示的文档的 URL -->
      <!-- iframe属性：frameborder是否显示 <iframe> 周围的边框：0不显示，1显示 -->
      <!-- iframe属性：scrolling是否在 <iframe> 中显示滚动条：no不显示，yes显示 -->
      <iframe src="iframe-content.html" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"
        scrolling="no"></iframe>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        margin: 0;
        padding: 0;
      .iframeclass {
        width: 10000px;
        height: 10000px;
        background-color: rgb(112, 112, 112);
    </style>
  </head>
    <div class="iframeclass">
      <p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
      <p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
      <p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
      <p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
    </div>
  </body>
</html>
6、a标签实现下载功能（同域和跨域）
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
      <!-- a 标签下载 -->
      <a href="/04-a标签下载功能/test.png" download="demo">下载</a>
      <!-- 其他标签实现下载   同域    -->
      <div onclick="download()">下载</div>
      <!-- 其他标签实现下载   跨域    -->
      <div onclick="download1()">下载</div>
    </div>
    <script>
      // 同域
      function download(
        url = '/04-a标签下载功能/test.png',
        title = 'demo2',
        artist = 'down'
        const eleLink = document.createElement('a') // 新建A标签
        eleLink.href = url || '/04-a标签下载功能/test.png' // 下载的路径
        eleLink.download = `${title} - ${artist}` // 设置下载的属性，可以为空
        eleLink.style.display = 'none'
        document.body.appendChild(eleLink)
        eleLink.click() // 触发点击事件
        document.body.removeChild(eleLink)
      // 跨域
      function download1(
        url = 'https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
        title = 'demo3',
        artist = 'down'
        var x = new XMLHttpRequest()
        x.open('GET', url, true)
        x.responseType = 'blob'
        x.onload = function () {
          const url = window.URL.createObjectURL(x.response)
          const eleLink = document.createElement('a')
          eleLink.href = url
          eleLink.download = `${title} - ${artist}`
          eleLink.style.display = 'none'
          document.body.appendChild(eleLink)
          eleLink.click()
          document.body.removeChild(eleLink)
        x.send()
    </script>
  </body>
</html>
二、图片url转化为base64文件和file类型文件
 
第一种方法：先转base64再转file
 
1、定义两个方法
 
	//图转base64
 export const function imageToBase64 (img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      console.log(img,canvas)
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
      var dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
	//图转base64
export const base64ToFile = (urlData, fileName) => {
    let arr = urlData.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bytes = atob(arr[1]); // 解码base64
    let n = bytes.length
    let ia = new Uint8Array(n);
    while (n--) {
        ia[n] = bytes.charCodeAt(n);
    return new File([ia], fileName, { type: mime });
2、调用刚才的2个方法
 
import { imageToBase64, base64ToFile } from "@/utils/img.js";
created() {
    //调用方法 【url仅参考】
    let url = 'https://testwq.jk.net/uploads/20200701/111fa8095def5bd296332f7eac01e400.jpg';
    this.handleImgToBase64(url, (res) => {
        // 接收回调结果
        console.log('回调结果', res);
    });
methods: {
    * url: 图片路径
    * cb: callback
    handleImgToBase64(url, cb) {
        let that = this; // 不知道有啥用
        var image = new Image();
        // image.setAttribute("crossOrigin",'Anonymous'); //设置图片跨域防止canvas生成内容时报错
        image.crossOrigin = '';
        image.src = url;
        image.onload = function () {
            let base64 = imageToBase64(image); //图片转base64
            let file = base64ToFile(base64, 'file'); //base64转File
            // 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】
            cb && typeof cb == 'function' && cb(file);
            return file;
第二种方法：XMLHttpRequest
 
 function getImageFileFromUrl(url, imageName) {
        return new Promise((resolve, reject) => {
            var blob = null;
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url);
            xhr.setRequestHeader('Accept', 'image/jpeg');
            xhr.responseType = "blob";
            xhr.onload = () => {
                blob = xhr.response;
                let imgFile = new File([blob], imageName, { type: 'image/jpeg' });
                resolve(imgFile);
            xhr.onerror = (e) => {
                reject(e)
            xhr.send();
        });
三、File文件转base64格式
 
 通过FileReader对象读取存储文件内容 
说明：
 readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容 
* file： file文件
base64(file) {
    return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
            imgResult = reader.result;
        reader.onerror = function(error) {
            reject(error);
        reader.onloadend = function() {
            resolve(imgResult);
    });
<input type="file" @change="previewFile">
var file = e.target.files[0];
this.base64(file);
四、base64的编码和解码
 
atob和btoa是window对象的两个函数，用来编码解码Base64。 
1、btoa：编码
 
var str = "This is a string";
var encoded_str = btoa(str);
console.log(encoded_str); // Outputs: "VGhpcyBpcyBhIHN0cmluZw=="
2、但是不能编码Unicode字符
 
3、如何让btoa支持Unicode字符编码
 
 编码时，先用encodeURIComponent对字符串进行编码，再进行btoa进行Base64编码
 解码时，先用atob对Base64编码的串进行解码，再用decodeURIComponent对字符串进行解码 
var str = "hello,中国";
var encoded_str = btoa(encodeURIComponent(str));
var decoded_str = decodeURIComponent(atob(encoded_str));
console.log(encoded_str); // Outputs: "aGVsbG8lMkMlRTQlQjglQUQlRTUlOUIlQkQ="
console.log(decoded_str); // Outputs: "hello,中国"
4、atob：解码
 
var encoded_str = "VGhpcyBpcyBhIHN0cmluZw==";
var str= atob(encoded_str);
console.log(str); // Outputs: "This is a string"
五、图片转换js （img对象，file对象，base64，canvas对象），以及图片压缩方式
 
参考链接：https://blog.csdn.net/twtcqw2008/article/details/80766914
def image_to_base64(image_np):
 image = cv2.imencode('.jpg',image_np)[1]
 image_code = str(base64.b64encode(image))[2:-1]
 return image_code
将base64编码解析成opencv可用图片
def base64_to_image(base64_code):
 # base64解码
 img_data = base64.b64decode(base64_code)
 # 转换为np数组
 img_a
				我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码；在这我们引用的是淘宝首页一张图片如下：
复制代码 代码如下:
var img = “https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg”;
我们如下编写代码：
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height =
				对于前端人员来说，图片处理是一个很常见的需求，由于图片稍微特殊，现在多数做法都是使用调用ajax接口通过http方法来提交，例如post方法提交，后台处理后返回一个图片路径给前端，前端根据这个路径写入img标签，但是基于当前的前后端分离的开发模式下，前后端代码往往不在同一个系统目录下，而且部署时可能liunx路径与windows路径不一样，这样后期路径更改可能会导致维护困难问题出现。
针对这种问题，这里我推荐使用图片转base64格式，再发给后端，后端只需将转码结果存入数据库即可，前端调用接口直接获取到base64数据直接写入img src 标签即可
下面使用element ui upload
				在公司H5项目发现中发现一个兼容性问题，就是在部分Android机自带的浏览器中点击img图片会新打开一个标签页预览图片。
有四种方式去解决这个问题，当然第一种是最简单的，加一条样式就好了。
1.img{ pointer-events: none; }
2.在img元素上添加 onclick="return false"
<img src="a.png" onclick="retu...
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
//var option={....} option配置请查看 http://photosw...
				方法1是浏览器为选择的图片设置一个虚拟路径，再将这个虚拟路径赋值给img标签的src
方法2是将选中的图片转换为base64位的编码，再将这个编码赋值给img标签的src。这个编码是独一无二的，可以在任何浏览器中通过地址访问
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
</head&g.
    openPdf1 () {
      // 后端下载文件流的地址接口
      let url = G_CGI_PHP.group.documentDownload + `?id=` + this.paymentImage1
      const newWindow = window.open()
      newWindow.document.write(.
# 假设已经有了一个base64编码的字符串，在这里代替为base64_data
base64_data = "data:image/png;base64,iVBORw0KGg..."
# 提取图片数据并解码
img_data = base64_data.split(',')[1]
img_binary = base64.b64decode(img_data)
# 将二进制数据转化为Image对象
img = Image.open(BytesIO(img_binary))
# 展示图片
img.show()
这段代码将会从base64字符串中提取出图片二进制数据并转换为Image对象，然后展示出来。您可以根据需要进行保存或进一步处理。