线上以及本地图片转base64编码

canvas转换本地图片为base64编码

class ImgToBase64 {
  constructor(imgurl) {
    this.imgUrl = imgurl;
    this.img = null;
  }

  getBase64() {
    let base64 = '';
    this.img = new Image();
    this.img.crossOrigin = 'Anonymous';
    this.img.src = this.imgUrl;

    return new Promise((resolve, reject) => {
      // 图片加载成功，转化base64格式
      this.img.addEventListener('load', () => {
        base64 = this.toBase64();
        resolve(base64);
      });
      // 图片加载失败 抛出错误
      this.img.addEventListener('error', () => {
        reject('false');
      });
    });
  }

  toBase64() {
    let canvas = document.createElement('canvas');
    canvas.width = this.img.width;
    canvas.height = this.img.height;
    let ctx = canvas.getContext('2d');
    ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height);
    let dataURL = canvas.toDataURL('image/png');
    return dataURL;
  }

}

var img = new ImgToBase64('preview-img.jpg');

img.getBase64().then((res) => {
  console.log(res);
});

使用CANVAS将本地（不能跨域！）的图片转换为base64的格式。

当图片文件是通过input[type=file]上传

<input type="file" id="upload">
<button class="btn">上传图片</button>
<textarea id="localimg-result"></textarea>

var localImg = function() {
    var $localResult = $('#localimg-result'); 

    $("#upload").change(function(){  
        var imgFile = new FileReader();
        imgFile.readAsDataURL(this.files[0]);
        imgFile.onload = function () {
            var imgData = this.result;
            $localResult.focus();
            $localResult.val(imgData);
        }
    }) ;  
}();

图片通过后台接口调用

具体请参考 http://tool.wubin.work/img2base64，请求的接口

http://tool.wubin.work/api/img2base64.php?url=填入图片的链接

网站带宽有限，可以在自己的服务器上搭建

<?php
header("Access-Control-Allow-Origin: *");
header("content:application/json;chartset=uft-8");
/**
 * 将传入图片地址转化为base64
 */
class ImgToBase64 
{
    public $url;
    public $base64;

    function __construct($url)
    {
        $this->url = $url;

        $this->checkUrl() && $this->tobase64();
        
    }

    private function checkUrl()
    {
        $pattern = '/http[s]?:\/\/[\w.-\/]+\.(jpg|png|gif|jpeg)/i';
        preg_match($pattern, $this->url, $match);
        if (!isset($match[0])) {
            $this->showError();
            return false;
        }
        $this->url = $match[0];
        return true;
    }

    private function tobase64()
    {
         $imageInfo = @getimagesize($this->url);
         if (!$imageInfo) {
             $this->showError();
             return;
         }
         $base64 = base64_encode(file_get_contents($this->url));
         // 在每个字符后分割一次字符串 分隔后再前端显示会有断行
        //  $base64 = chunk_split($base64);
         $blob = 'data:' . $imageInfo['mime'] . ';base64,';
         $this->base64 = $blob . $base64;
    }

    private function showError()
    {
        $this->base64 = false;
    }

    public function getBase64()
    {
        return $this->base64;
    }

}

// $img = 'http://statics.qdxin.cn/uploadfile/2020/1212/20201212100223404.jpg';

$img_url = isset($_GET['url']) ? $_GET['url'] : false;
$res = array(
    'error' => 1,
    'data' => false
);
if ($img_url) {
    $base64 = new ImgToBase64($img_url);
    $img_base64 = $base64->getBase64();
    (boolean)$img_base64 && $res = array(
        'error' => 0,
        'data' => $img_base64
    );
}
$json = json_encode($res);
exit($json);
?>

使用PHP方法没有任何副作用，可以跨域将非本域名下的图片文件转化为base64编码进行渲染、海报生成等操作！

具体应用可以参考我的另一篇文章：Vue+html2canvas截图空白的问题

通过input[type=file]上传图片的预览

非IE实现本地上传图片的预览

<div id="imgbox"><img></div>
<input type="file" id="upload">
<script src="http://vip.qdxin.cn/navmenu/js/jxinq111.js"></script>

//建立一個可存取到該file的url  
function getObjectURL(file) {  
  var url = null ;   
  // 针对不同的浏览器执行不同的 js 函数而已  
  if (window.createObjectURL!=undefined) { // basic  
    url = window.createObjectURL(file) ;  
  } else if (window.URL!=undefined) { // mozilla(firefox)  
    url = window.URL.createObjectURL(file) ;  
  } else if (window.webkitURL!=undefined) { // webkit or chrome  
    url = window.webkitURL.createObjectURL(file) ;  
  }  
  return url ;  
}  

$("#upload").change(function(){  
  var objUrl = getObjectURL(this.files[0]) ;  
  // console.log("objUrl = "+objUrl) ;  
  if (objUrl) {  
    $("#imgbox img").attr("src", objUrl) ;  
  }  
}) ;

相关资料