nito
nito
  • 发布:2019-03-29 20:25
  • 更新:2019-03-29 20:25
  • 阅读:257

dataURL存图连结闪退?

分类:HBuilderX

dataURL存图连结闪退

我用的是cropper js的个插件
我把裁切下来的图透过 .toDataURL方法
再用href变成base64的连结

但是点击下载后 程序闪退
在浏览器上可以跑 编译到手机上就没办法
请问这是什么问题呢?

是要先把图片写入档案系统吗?

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.css">  
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.css">  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.js"></script>  
        <!--https://blog.csdn.net/weixin_38023551/article/details/78792400 中文文件-->  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  

        <title>Cropper JS Edit Image</title>  
    </head>  
    <body>  
  <div class="container">  
    <h1>Minimum and maximum cropped dimensions</h1>  
    <h3>Image</h3>  
    <div>  
      <img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">  
    </div>  
    <p>Maximum Width: 640, Maximum Height: 320, Minimum Width: 320, Minimum Height: 160</p>  
    <p>Data: <span id="data"></span></p>  
    <h3>Result</h3>  
    <div id="">  
        <p>  
          <button type="button" id="button">Crop</button>  
          <a id="download" download="downImg" onclick="" style="float: right;">download</a>  
        </p>  

    </div>  
    <div id="result"></div>  
  </div>  

  <style>  
    .container {  
      margin: 20px auto;  
      max-width: 640px;  
    }  
    img {  
      max-width: 100%;  
    }  
  </style>  
  <script>  
    window.addEventListener('DOMContentLoaded', function () {  
      var image = document.querySelector('#image');  
      var data = document.querySelector('#data');  
      var button = document.getElementById('button');  
      var result = document.getElementById('result');  
      var minCroppedWidth = 320;  
      var minCroppedHeight = 160;  
      var maxCroppedWidth = 640;  
      var maxCroppedHeight = 320;  
      var cropper = new Cropper(image, {  
        viewMode: 3,  
        data: {  
          width: (minCroppedWidth + maxCroppedWidth) / 2,  
          height: (minCroppedHeight + maxCroppedHeight) / 2,  
        },  
        crop: function (event) {  
          var width = event.detail.width;  
          var height = event.detail.height;  
          if (  
            width < minCroppedWidth  
            || height < minCroppedHeight  
            || width > maxCroppedWidth  
            || height > maxCroppedHeight  
          ) {  
            cropper.setData({  
              width: Math.max(minCroppedWidth, Math.min(maxCroppedWidth, width)),  
              height: Math.max(minCroppedHeight, Math.min(maxCroppedHeight, height)),  
            });  
          }  
          data.textContent = JSON.stringify(cropper.getData(true));  
        },  
      });  

      button.onclick = function () {  
        result.innerHTML = '';  
        result.appendChild(cropper.getCroppedCanvas());  

        var dataURL = cropper.getCroppedCanvas().toDataURL('image/jpeg'); //toDataURL方法   
        $("#download").attr("href",dataURL);   

        console.log(dataURL);  
      };  
    });  
  </script>  
</body>  
</html>  
2019-03-29 20:25 负责人:无 分享
已邀请:

要回复问题请先登录注册