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>
0 个回复