<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; outline: none; border: none; } #canvas{ margin: auto auto; width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> <img id="img" src="" /> </body> </html> <script type="text/javascript"> /** * rem 布局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 獲取 canvas 畫布 * 獲取 canvas 繪圖上下文環境 */ var canvas = $('#canvas')[0]; var cxt = canvas.getContext('2d'); /** * 圖片處理函數 drawImage, 圖片轉化為 base64 格式 toDataURL * drawImage(圖形對象, sx, sy, sw, sh, dx, dy, dw, dh) * s: 原圖形 * d: 新圖形 * x: 圖形的起點橫坐標 * y: 圖形的起點縱坐標 * w: 圖形的寬度 * h: 圖形的高度 * toDataURL("圖片格式, 默認為 image/png") */ var img = new Image(); img.src = "../img/background_2.jpg"; img.onload = function(){ cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); var src = canvas.toDataURL("image/jpeg"); $('#img').attr('src', src); } </script>