關於pc端和移動端長長按圖保存到本地的問題
1.pc端：javascript
<canvas id='canvas' width="500" height="500"></canvas>
<!-- <img src="http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg" > -->
<button id="save">保存</button>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
// 內存中先加載，而後當內存加載完畢時，再把內存中的數據填充到咱們的 dom元素中，這樣可以快速的去
// 反應，好比網易的圖片
var img = new Image();
img.setAttribute("crossOrigin",'anonymous');//須要放在圖片賦值前，不然部分瀏覽器會報錯
img.onload = function(){
// alert('加載完畢')
// 將圖片畫到canvas上面上去！
ctx.drawImage(img,593,327,500,500,100,100,300,300);
}
img.src = "http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
// img.src = "http://rc.rry.info/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.chanPayQrcode&url=https://qr.alipay.com/bax062248bb2tkmy1ubv2071";
}
document.getElementById("save").onclick = function (){
console.log('canvas',canvas)
downLoad(saveAsJPG(canvas));
}
// 保存成png格式的圖片
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
// 保存成jpg格式的圖片
function saveAsJPG(canvas) {
return canvas.toDataURL("image/jpeg");
}
function downLoad(url){
var oA = document.createElement("a");
oA.download = 'img';// 設置下載的文件名，默認是'下載'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下載以後把建立的元素刪除
}
</script>
2.移動端：此方法針對多組圖片，多個圖片能夠添加相同的class而後js根據class的長度來進行操做。其中主要用到plus.downloader.createDownload(url, options, completedCB);php
- url: ( String ) 必選 要下載文件資源地址
要下載文件的url地址，僅支持網絡資源地址，支持http或https協議。 容許建立多個相同url地址的下載任務。 注意：若是url地址中包含中文或空格等，須要進行urlencode轉換。 - options: ( DownloadOptions ) 可選 下載任務的參數
可經過此參數設置下載任務屬性，如保存文件路徑、下載優先級等。 - completedCB: ( DownloadCompletedCallback ) 可選 下載任務完成回調函數
當下載任務下載完成時觸發，成功或失敗都會觸發
<img src="H5canvas鼠標通過的地方星星鏈接/xkbg.png" id="image">
<!-- 彈框的html-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom" style="z-index: 99999999">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="javascript:;" id="saveImg">保存圖片</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<script type="text/javascript">
mui.init( { gestureConfig:{
tap: true, //默認爲true
doubletap: true, //默認爲false
longtap: true, //默認爲false
swipe: true, //默認爲true
drag: true, //默認爲true
hold:true,//默認爲false，不監聽
release:false//默認爲false，不監聽
}});
document.getElementById('image').onclick = function(){
//給須要長按保存圖片的img標籤設置 class='saveImg'
var divs = document.getElementsByClassName('saveImg');
for(var i = 0;i<divs.length;i++){
divs[i].addEventListener('longtap', function () {
//開啓彈框
mui('#picture').popover('toggle');
console.log(this.src)
var imgurl = this.src;
document.getElementById('saveImg').addEventListener('tap', function () {
var imgDtask = plus.downloader.createDownload(imgurl,{method:'GET'}, function (d,status) {
if(status == 200){
plus.gallery.save(d.filename, function () {//保存到相冊
plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
// 關閉彈框
mui('#picture').popover('toggle');
mui.toast('保存成功')
});
})
}else{
mui.toast('保存失敗')
}
});
imgDtask.start();
});
})
}
}
</script>
3.移動端單張圖片：注意plus.downloader.createDownload(url, options, completedCB)中的url是圖片在服務器端的路徑好比：https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1335795923,3245280170&fm=15&gp=0.jpg這種格式，而不是文件資源！css
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/jquery-2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/css">
#imageList{
display: flex;
}
.cs{
width: 0;
height: 0;
}
.saveImg1{
width: 100%;
height: 100%;
visibility: hidden;
}
</style>
</head>
<body>
<!-- <img id="image" style="width: 300px;height: 300px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571203612306&di=42932c7868bcb8054af73d53d0b24ff6&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F28ea2e5cf17173f84ef74064e95627cc3ba75fe627e71-hKNgS4_fw658" > -->
<div class="imageList">
<div id="">
<canvas id='canvas' width="300" height="300"></canvas>
</div>
<div class="cs">
<img class="saveImg1" style="width: 200px;height: 200px;" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1335795923,3245280170&fm=15&gp=0.jpg" >
</div>
<div id="image">
保存
</div>
</div>
<!-- 彈框的html-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom" style="z-index: 99999999">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="javascript:;" id="saveImg">保存圖片</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<script type="text/javascript">
mui.init( { gestureConfig:{
tap: true, //默認爲true
doubletap: true, //默認爲false
longtap: true, //默認爲false
swipe: true, //默認爲true
drag: true, //默認爲true
hold:true,//默認爲false，不監聽
release:false//默認爲false，不監聽
}});
window.onload = function(){
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
// 內存中先加載，而後當內存加載完畢時，再把內存中的數據填充到咱們的 dom元素中，這樣可以快速的去
// 反應，好比網易的圖片
var img = new Image();
img.setAttribute("crossOrigin",'anonymous');//須要放在圖片賦值前，不然部分瀏覽器會報錯
img.onload = function(){
// 將圖片畫到canvas上面上去！
ctx.drawImage(img,593,327,500,500,100,100,300,300);
}
img.src = "http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
// img.src = "http://rc.rry.info/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.chanPayQrcode&url=https://qr.alipay.com/bax062248bb2tkmy1ubv2071";
$('.saveImg1').attr('src',img.src)
}
// document.getElementById('image').addEventListener('tap',function(){
console.log('點擊圖片了')
//給須要長按保存圖片的img標籤設置 class='saveImg'
var divs = $('.saveImg1');
$('#canvas')[0].addEventListener('longtap', function () {
//開啓彈框
mui('#picture').popover('toggle');
var imgurl = divs[0].src;
document.getElementById('saveImg').addEventListener('tap', function () {
var imgDtask = plus.downloader.createDownload(imgurl,{method:'GET'}, function (d,status) {
console.log(typeof(imgurl))
console.log(imgurl)
console.log(JSON.stringify(d))
console.log(JSON.stringify(status))
if(status == 200){
plus.gallery.save(d.filename, function () {//保存到相冊
plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
// 關閉彈框
mui('#picture').popover('toggle');
mui.toast('保存成功')
});
})
}else{
mui.toast('保存失敗')
}
});
imgDtask.start();
});
})
</script>
4.本身用canvas畫圖並下載html
<div id="app"></div>
<canvas id="canvas" width="400" height="400"></canvas>
<div>
<button id="save">保存</button>
</div>
</body>
<script>
var arr = [
{locations:[[0,0],[200,200],[0,400]],color:"red"},
{locations:[[0,0],[400,0],[200,200]],color:"orange"},
{locations:[[0,400],[100,300],[200,400]],color:"yellow"},
{locations:[[100,300],[200,200],[300,300],[200,400]],color:"green"},
{locations:[[300,100],[200,200],[300,300]],color:"blue"},
{locations:[[300,100],[400,0],[400,200],[300,300]],color:"indigo"},
{locations:[[200,400],[400,400],[400,200]],color:"purple"}
];
var oCanvas = document.getElementById("canvas");
var ctx = oCanvas.getContext("2d");
for(let i=0;i<arr.length;i++){
draw(arr[i],ctx);
}
function draw(item,ctx){
ctx.beginPath();
ctx.moveTo(item.locations[0][0],item.locations[0][1]);
for(let i = 0;i<item.locations.length;i++){
let x = item.locations[i][0];
let y = item.locations[i][1];
ctx.lineTo(x,y);
console.log(1234567)
}
ctx.closePath();
ctx.fillStyle = item.color;
ctx.fill();
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.stroke();
}
var imgId = document.getElementById("imgId");
document.getElementById("save").onclick = function (){
console.log('canvas',canvas)
downLoad(saveAsPNG(canvas));
}
// 保存成png格式的圖片
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
// 保存成jpg格式的圖片
function saveAsJPG(canvas) {
return canvas.toDataURL("image/jpeg");
}
// 保存成bmp格式的圖片 目前瀏覽器支持性很差
function saveAsBMP(canvas) {
return canvas.toDataURL("image/bmp");
}
/**
* @author web得勝
* @param {String} url 須要下載的文件地址
* */
function downLoad(url){
var oA = document.createElement("a");
oA.download = 'img';// 設置下載的文件名，默認是'下載'
oA.href = url;
document.body.appendChild(oA);
console.log(oA)
oA.click();
oA.remove(); // 下載以後把建立的元素刪除
}
</script>
相關文章
- 1. 移動端，mui + h5 實現長按圖片保存到相冊
- 2. 移動端長按事件
- 3. PHP 合併圖片，長按圖片保存圖片到本地
- 4. Android長按圖片保存到本地並且更新圖庫
- 5. Swift版本UIWebView長按保存圖片
- 6. PC端和移動端地址適配
- 7. jQuery移動端長按事件
- 8. vue移動端長按事件
- 9. 移動端h5模擬長按事件
- 10. 圖片兼容移動端和pc端
- 更多相關文章...
- • 服務端腳本 指南 - 網站建設指南
- • WSDL 端口 - WSDL 教程
- • 適用於PHP初學者的學習線路和建議
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 移動端，mui + h5 實現長按圖片保存到相冊
- 2. 移動端長按事件
- 3. PHP 合併圖片，長按圖片保存圖片到本地
- 4. Android長按圖片保存到本地並且更新圖庫
- 5. Swift版本UIWebView長按保存圖片
- 6. PC端和移動端地址適配
- 7. jQuery移動端長按事件
- 8. vue移動端長按事件
- 9. 移動端h5模擬長按事件
- 10. 圖片兼容移動端和pc端