最近在做一個上傳頭像然后保存顯示的功能，因為涉及到裁剪大小和尺寸比例，所以直接上傳圖片再展示的話，就會出現問題，所以就想用canvas來渲染裁剪后的圖片，然后轉化成base64格式的圖片再存儲，這樣取用的時候也比較方便。
我寫了一個demo來展示一下怎么把一張圖片渲染成canvas圖片，並轉化為base64格式導出。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id='canvas'></canvas> <script src="~/Scripts/jquery-3.3.1.js"></script> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');//返回一個用於在畫布上繪圖的環境，當前唯一的合法值是 "2d"，它指定了二維繪圖，返回一個 CanvasRenderingContext2D 對象，使用它可以繪制到 Canvas 元素中 var url = '/Content/images/demo.jpg';//圖片URL var urlNumber = 1;//要渲染的圖片數 var w = 300;//canvas的寬 var h = 300;//canvas的高 var img = new Image(); img.crossOrigin = 'Anonymous';//解決Canvas.toDataURL 圖片跨域問題 img.src = url; //渲染方法 var imgs = function () { context.drawImage(img, 0, 0, w, h); //導出 var base64Img = canvas.toDataURL('image/jpg'); console.log(base64Img); } img.onload = function () { urlNumber -= 1; if (urlNumber === 0) { imgs(); } } </script> </body> </html>
運行程序，查看控制台記錄的base64格式圖片：
如果要傳到后台，就以字符串的形式保存就好了；取用的時候也是直接取字符串。
/****************************我是可愛的分割線*************************************/
