图片灰化处理
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);
要点:设置旋转点。以元素左上角为圆点;设置旋转角度。