圖片灰化處理

var imgdate=context.getImageData(0,0,imageWidth,imageHeight);
            var red,green,blue,gray;
           // alert(imgdate.data.length);
            for (var i=0;i<imgdate.data.length;i+=4)
            {
            red=imgdate.data[i];
            green=imgdate.data[i+1];
            blue=imgdate.data[i+2];
            gray=parseInt((red + green + blue) / 3);
            imgdate.data[i]=gray;
            imgdate.data[i+1]=gray
            imgdate.data[i+2]=gray
            }
            context.putImageData(imgdate,0,0);
            var data = canvas.toDataURL('image/png');
 

根據div等標籤擷取網頁成圖片

剪下viewDiv中。

html2canvas(document.getElementById('viewDiv')).then(function(canvas) {
//$("#viewDiv").show();
        var url=canvas.toDataURL();
         var dataUrl="url('"+url+"')"
         $('#photo').css('background-image', dataUrl);   // $('#page').hide();
    changeCut(url);
    // console.log(url)
   });
 

注意：如果圖片不是在同一個域名下的，比如  www.baidu.com/下的。則圖片無法擷取。

圖片旋轉：

 var context = canvas.getContext('2d');
   context.translate(0,imageHeight);
   context.rotate(-90*Math.PI/180);
   context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);

要點：設定旋轉點。以元素左上角為圓點；設定旋轉角度。