| 小打小鬧 |
|
||
|
官網demo：http://code.ciaoca.com/jquery/jcrop/demo/crop （只有效果沒有代碼的demo） 文檔：http://code.ciaoca.com/jquery/jcrop/ 由于似懂非懂最終自己抄了個demo，并結合查詢到 canvas 標簽，繪制一張新圖片達到頁面截圖圖片的效果。 對應的css和js 從文檔中的git下載即可。 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="dist/jcrop.css"> <script type="application/javascript" src="dist/jcrop.js"></script> </head> <body> <div> <img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg"> </div> <input type="button" value="確認截圖" onclick="cut()"> <div> <div id="clipImgDiv"></div> </div> </body> <script type="application/javascript"> var jcp; Jcrop.load('target').then(img => { jcp = Jcrop.attach(img, {multi: false,allowResize:false, aspectRatio:2}); const rect = Jcrop.Rect.sizeOf(jcp.el); console.log(rect) jcp.newWidget(rect.scale(.7, .5).center(rect.w, rect.h)); jcp.focus(); }); function $(d){ if(d.startsWith("#")) return document.getElementById(d.replace('#','')) else if (d.startsWith(".")) return document.getElementsByClassName(d.replace('.','')) else return document.getElementsByName(d) } function cut() { console.log(jcp.active.pos); cropImage($('#target'), jcp.active.pos); } function cropImage(img,pos) { var newCanvas = document.createElement('canvas'); newCanvas.setAttribute('id', 'newCanvas'); newCanvas.width = pos.w ; newCanvas.height = pos.h ; newCanvas.style.border = "1px solid #d3d3d3"; var newCtx = newCanvas.getContext('2d'); clipImgDiv.appendChild(newCanvas); newCtx.drawImage(img, pos.x, pos.y, pos.w, pos.h, 0, 0, pos.w , pos.h ); // canvas轉化為圖片 var newImage = new Image(); newImage.crossOrigin = ''; newImage.src = newCanvas.toDataURL(); newImage.style.marginLeft = '5px'; $("#clipImgDiv").appendChild(newImage); } </script> </html> 最終效果：
|
 |
|
博客園
 浙公網安備 33010602011771號
浙ICP備2021040463號-3
|
|
