1. dn_canvas_drawimage.js文件
/**
* 直角三角形 正弦 sin = (对边/斜边)；余弦 cos = (邻边/斜边)；余切 tan = (对边/邻边)。
* 互余是指相加等于90°的两角，互补是指两个角的和为180°
*
* canvas 画布（ctx = Canvas.getContext("2d")）
* 1.原点：Canvas的左上角(0, 0)；x轴正方向向右；y轴的正方向向下。
* 2.旋转正方向：向右旋转（顺时针旋转）;
* 默认旋转中心：Canvas原点(0, 0)。
* Canvas画布坐标系旋转的角度，单位是弧度。此旋转和CSS3的旋转变换不一样，旋转的是坐标系，而非元素。
* ctx.translate(x,y)指将畫布原點（或圖像的左上角）移到点(x,y)後，再對對象進行(旋轉等)操作；
* 坐标系还原到初始原点： ctx.setTransform(1, 0, 0, 1, 0, 0);
* 3. ctx.drawImage()
* ① 在画布上定位图像：ctx.drawImage(img,x,y)
* ② 在画布上定位图像，并规定图像的宽度和高度：ctx.drawImage(img,x,y,width,height)
* ③ 剪切图像，并在画布上定位被剪切的部分：ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)；
* 重点:sx,sy是相对于图片的坐标，即图片左上角为sx，sy的坐标系，而不是画布左上角(0,0)为坐标系
* 参数 描述
* img 规定要使用的图像、画布或视频。
* sx 可选。开始剪切的 x 坐标位置。
* sy 可选。开始剪切的 y 坐标位置。
* swidth 可选。被剪切图像的宽度。
* sheight 可选。被剪切图像的高度。
* x 在画布上放置图像的 x 坐标位置。
* y 在画布上放置图像的 y 坐标位置。
* width 可选。要使用的图像的宽度。（伸展或缩小图像）
* height 可选。要使用的图像的高度。（伸展或缩小图像）
*
* 注意，canvas繪製圖像url時：
* 1.先以url圖像的原始寬高（圖像真實的寬高, 設置畫布的繪製寬高（canvas->width、height）畫布真實的大小）繪畫在畫布上;
* 再按照樣式style指定的寬高在頁面(瀏覽器)上顯示(canvas.style --> width、height 画布最终显示的大小)。
* 2.呈现图像：先在画布上定位图像，再以指定的绘画原點来呈现图像。
* 3.图像旋转：先在画布上定位图像，然后以指定平移的旋转中心（畫布原點）旋转图像，再将旋转后的图像绘画在指定大小的画布上（画布大小：图像旋转后的新的圖像寬高）。
* 4.图像剪切：先在画布上定位图像，然后以图像的原始大小，根据传入的x,y,w,h的值来剪切图像，再绘画剪切后的图像。
* 5.图像旋转剪切：先在画布上定位图像，然后以图像的原始大小，根据传入的x,y,w,h的值来剪切图像，接着旋转图像，再绘画先剪切后旋转过的图像。
* 6.Url圖像呈現顺序：定位 -> 剪切 -> 再旋轉 -> 最后绘制图像。[ctx.translate(x,y);ctx.rotate(radian);ctx.drawImage(img,sx,sy,sw,sh,x,y,w,h);]
* 7.若要实现：定位 -> 再旋轉 -> 剪切 -> 最后绘制图像。
* 需要使用 img.setAttribute("crossOrigin", 'Anonymous'); var imgData = ctx.getImageData(cx, cy, cw, ch); ctx.putImageData(imgData, x, y);
* 或使用HTML的crossOrigin属性； canvas.toDataURL("image/png");再重新呈现图像。
*
* 4. ctx.scale() 图片镜像
* scale(1, 1)： 默认
* scale(-1,1)： 水平翻转
* scale(1,-1)： 垂直翻转
* scale(-1,-1)： 水平垂直翻转
*
* img HTML标签
* 1.原点：左上角；x轴正方向向右；y轴的正方向向下，(人的面对屏幕时，以人的方向为基准)。
* 2.旋转正方向：向右旋转（顺时针旋转）。
* 默认旋转中心: img圖像的中心。
* 3.元素控件的Style宽高：需要通过图像最终显示的宽高来推算出，控件的style宽高。
* 4.元素控件最终显示的宽高与Style的宽高值不同。
*
* （HTML 标签 img旋轉：將图像放进控件中，再以旋转中心进行旋转）
**/
function CanvasDrawImage() {
function el(id) { return document.getElementById(id); };
var d = this;
//保留n为小数（四舍五入）
d.round = function (num, n) { return Number(num.toFixed(n)); };
//處理角度, 防止輸入大於360或負數的度數
d.getRotate = function (rotate) {
rotate = rotate % 360;
if (rotate < 0)
rotate = 360 + rotate;
return rotate;
};
//解析最大宽度或高度约束
d.parseSizeMax = function (w, h, max) {
var scale = zoom = 1;
var rw = w, rh = h;
if (max > 0 && w > 0 && h > 0) {
//横向及方形
if (w >= h) {
if (w > max) {
scale = max / w;
zoom = w / max;
rw = max;
rh = d.round((h * scale), 2);
}
} else {
//纵向
if (h > max) {
scale = max / h;
zoom = h / max;
rw = d.round((w * scale), 2);
rh = max;
}
}
}
return { width: rw, height: rh, scale: scale, zoom: zoom };
};
//角度转弧度计算（公式：radian = degree * Math.PI / 180）
d.calculateRadian = function (rotate) {
return (rotate * Math.PI / 180);
};
//計算旋轉指定角度後，新的圖像寬高及旋轉中心(Cancas畫布)
d.calculatePointCoordinates = function (rotate, w, h) {
rotate = d.getRotate(rotate);
//角度转弧度
var rotateRadian = d.calculateRadian(rotate);
var o = {
DrawX: 0, //(cancas畫布)起始繪畫坐標x
DrawY: 0, //(cancas畫布)起始繪畫坐標y
DrawWidth: w, //圖像繪畫寬
DrawHeight: h, //圖像繪畫高
Rotate: rotate, //旋轉角度
Radian: rotateRadian, //旋轉弧度
RotateWidth: w, //旋轉後的寬
RotateHeight: h, //旋轉後的高
TransformOrigin: { X: 0, Y: 0 }, //(cancas畫布)旋轉中心平移坐標
Left: 0, //(img元素標籤)旋轉後的圖像需左移的距離
Top: 0, //(img元素標籤)旋轉後的圖像需下移的距離
OriginalWidth: w, //原始寬
OriginalHeight: h //原始高
};
if (rotate != 0) {
//坐標計算參考系：原點(0,0)：圖像左上角，x軸正方向：向右，y軸的正方向：向上，旋轉中心：原點
//圖像沒有作任何旋轉時，圖像四個角的坐標值(左上、右上、右下、左下)
var ix1 = 0, iy1 = 0;
var ix2 = w, iy2 = 0;
var ix3 = w, iy3 = -h;
var ix4 = 0, iy4 = -h;
//圖像旋轉一定弧度後，四個角的坐標值(左上、右上、右下、左下)
var rx1 = d.round((Math.cos(rotateRadian) * ix1 + Math.sin(rotateRadian) * iy1), 2);
var ry1 = d.round((-Math.sin(rotateRadian) * ix1 + Math.cos(rotateRadian) * iy1), 2);
var rx2 = d.round((Math.cos(rotateRadian) * ix2 + Math.sin(rotateRadian) * iy2), 2);
var ry2 = d.round((-Math.sin(rotateRadian) * ix2 + Math.cos(rotateRadian) * iy2), 2);
var rx3 = d.round((Math.cos(rotateRadian) * ix3 + Math.sin(rotateRadian) * iy3), 2);
var ry3 = d.round((-Math.sin(rotateRadian) * ix3 + Math.cos(rotateRadian) * iy3), 2);
var rx4 = d.round((Math.cos(rotateRadian) * ix4 + Math.sin(rotateRadian) * iy4), 2);
var ry4 = d.round((-Math.sin(rotateRadian) * ix4 + Math.cos(rotateRadian) * iy4), 2);
//旋轉後的寬、高(用對角坐標求得)
o.RotateWidth = Math.max(Math.abs(rx1 - rx3), Math.abs(rx2 - rx4));
o.RotateHeight = Math.max(Math.abs(ry1 - ry3), Math.abs(ry2 - ry4));
//(cancas畫布)圖像旋轉前，旋轉中心需要平移坐標點
o.TransformOrigin.X = Math.abs(Math.min(rx1, rx2, rx3, rx4));
o.TransformOrigin.Y = Math.abs(Math.max(ry1, ry2, ry3, ry4));
//(img元素標籤)旋轉後的圖像需左移或下移的距離
o.Left = (o.RotateWidth - o.DrawWidth) / 2;
= (o.RotateHeight - o.DrawHeight) / 2;
}
return o;
};
//从canvas提取图片image(返回的是一串Base64编码的URL,默認格式PNG)
d.getCanvasToImageUrl = function (objCanvas, exp) {
if (exp)
return objCanvas.toDataURL("image/" + exp);
else
return objCanvas.toDataURL("image/png");
};
/* 以下為呈現圖像處理 */
d.MaxWH = 650;
//取圖像對象
d.getImage = function (imgSrc) {
var objImg = new Image();
objImg.src = imgSrc;
//解决canvas图片getImageData cross-origin跨域问题, Anonymous元素的跨域资源请求不需要凭证标志设置。
objImg.setAttribute("crossOrigin", 'Anonymous');
return objImg;
};
//設置畫布的寬高
d.setCanvasSize = function (objCanvas, width, height, styleWidth, styleHeight) {
//畫布的真實大小，不可見
objCanvas.width = width;
objCanvas.height = height;
//畫布最終顯示的大小；若畫布顯示大小沒有設置，則默認取畫布的真實大小作顯示大小
if (styleWidth > 0 && styleHeight > 0) {
objCanvas.style.width = styleWidth + "px";
objCanvas.style.height = styleHeight + "px";
}
};
//檢驗值是否為“Y”(Yes)
d.checkValueIsYes = function (val) {
return val == "Y";
};
//取畫布呈現圖像位置信息(計算圖像旋轉後的尺寸位置，並處理剪切图像數據)
d.getCropPosition = function (oCropInfo) {
var o = new Object();
//按比例換算圖像寬高
//按圖片縮放比例、屏幕縮放比例換算縮略圖原圖大小
o.Width = Math.ceil(oCropInfo.Width * oCropInfo.Zoom / oCropInfo.Scale);
o.Height = Math.ceil(oCropInfo.Height * oCropInfo.Zoom / oCropInfo.Scale);
//按屏幕縮放比例換算PT圖位置及大小
o.CropX = Math.floor(oCropInfo.X / oCropInfo.Scale);
o.CropY = Math.floor(oCropInfo.Y / oCropInfo.Scale);
o.CropWidth = Math.ceil(oCropInfo.CropWidth / oCropInfo.Scale);
o.CropHeight = Math.ceil(oCropInfo.CropHeight / oCropInfo.Scale);
return o;
};
//清空畫布
d.clearCanvas = function (objCanvas) {
if (objCanvas != null) {
//取畫布的上下文
var context = objCanvas.getContext("2d");
if (context != null)
context.clearRect(0, 0, objCanvas.width, objCanvas.height);
}
};
//canvas繪圖(在画布顯示按指定位置大小顯示圖像，不作旋轉處理)
d.drawImage = function (objCanvas, imgSrc, showWidth, showHeight, drawX, drawY) {
if (objCanvas != null) {
//取畫布的上下文
var context = objCanvas.getContext("2d");
if (context != null) {
//清除上下文
context.clearRect(0, 0, objCanvas.width, objCanvas.height);
context.save();
//取圖像
var objImg = d.getImage(imgSrc);
//圖像加載
objImg.onload = function () {
//設置畫布的寬高
d.setCanvasSize(objCanvas, objImg.width, objImg.height, showWidth, showHeight);
//剪切图像，并在画布上定位被剪切的部分
context.drawImage(objImg, drawX, drawY, objCanvas.width, objCanvas.height);
context.restore();
};
}
}
};
//canvas繪圖(使用过渡画布，旋转 -> 镜像 -> 剪切)
d.drawImageTransitionCrop = function (objTargetCanvas, imgSrc, cropInfo, oPosition) {
if (objTargetCanvas != null && cropInfo != null) {
var objTransCanvas = document.createElement("canvas");
objTransCanvas.style.display = "none";
//取畫布的上下文
var context = objTransCanvas.getContext("2d");
if (context != null) {
//取圖像
var objImg = d.getImage(imgSrc);
//清除上下文
context.clearRect(0, 0, objTransCanvas.width, objTransCanvas.height);
//保存当前的绘图状态
context.save();
//圖像加載（先旋转图像再剪切指定位置大小的图像）
objImg.onload = function () {
var drawSize = d.calculatePointCoordinates(cropInfo.ActualRotate, objImg.width, objImg.height);
//==========*==========*旋转*==========*==========
//設置畫布的寬高
d.setCanvasSize(objTransCanvas, drawSize.RotateWidth, drawSize.RotateHeight);
//平移畫布原點
context.translate(drawSize.TransformOrigin.X, drawSize.TransformOrigin.Y);
//旋轉弧度
context.rotate(drawSize.Radian);
//画图
context.drawImage(objImg, drawSize.DrawX, drawSize.DrawY, drawSize.DrawWidth, drawSize.DrawHeight);
//坐标系还原到初始比例及原点
context.setTransform(1, 0, 0, 1, 0, 0);
//保存状态
context.save();
//==========*==========*镜像*==========*==========
d.drawImageAfterMirror(objTargetCanvas, objTransCanvas, context, cropInfo, oPosition);
};
}
}
};
//canvas繪圖(旋转剪切图像后，再水平镜像或垂直镜像)
d.drawImageAfterMirror = function (objTargetCanvas, objTransCanvas, cxt, cropInfo, oPosition) {
var w = objTransCanvas.width, h = objTransCanvas.height;
//在展示的画布上画图
var drawTargetCanvas = function () {
var rate, cx, cy, cw, ch;
//按指定的位置大小截取旋转后的图像的图像数据
var imgData;
//==========*==========*剪切經過旋转、鏡像等處理後的畫布图像*==========*==========
if (oPosition != null && oPosition.Width > 0) {
rate = oPosition.Width / w;
cx = Math.floor(oPosition.CropX / rate);
cy = Math.floor(oPosition.CropY / rate);
cw = (oPosition.CropWidth / rate);
ch = (oPosition.CropHeight / rate);
}
else {
rate = 1;
cx = 0;
cy = 0;
cw = w;
ch = h;
}
//按指定的位置大小截取旋转后的图像的图像数据
imgData = cxt.getImageData(cx, cy, cw, ch);
//存儲圖像縮放比例
//objTargetCanvas.setAttribute("zoom", rate);
//==========*==========*展示 經過旋转、鏡像、剪切的图像*==========*==========
//展示画布的上下文
var context = objTargetCanvas.getContext("2d");
if (context != null) {
context.clearRect(0, 0, objTargetCanvas.width, objTargetCanvas.height);
context.save();
//設置畫布的寬高
d.setCanvasSize(objTargetCanvas, cw, ch);
//呈现截取后的图像数据
//context.putImageData(imgData, 0, 0, 0, 0, cw, ch);
context.putImageData(imgData, 0, 0);
//保存绘图状态
context.save();
}
};
var bFlipH = d.checkValueIsYes(cropInfo.FlipHorizontal);
var bFlipV = d.checkValueIsYes(cropInfo.FlipVertical);
if (bFlipH || bFlipV) {
//从canvas提取图片image
var canvasImg = d.getCanvasToImageUrl(objTransCanvas);
//取圖像
var objImg = d.getImage(canvasImg);
objImg.onload = function () {
//清除画布
cxt.clearRect(0, 0, w, h);
if (bFlipH && bFlipV) {
//平移畫布原點
cxt.translate(w, h);
//水平垂直翻转
cxt.scale(-1, -1);
}
else if (bFlipH) {
cxt.translate(w, 0);
//水平翻转
cxt.scale(-1, 1);
}
else if (bFlipV) {
cxt.translate(0, h);
//垂直翻转
cxt.scale(1, -1);
}
//画图
cxt.drawImage(objImg, 0, 0, w, h);
//坐标系还原到初始比例及原点
cxt.setTransform(1, 0, 0, 1, 0, 0);
cxt.restore();
drawTargetCanvas();
};
}
else {
drawTargetCanvas();
}
};
//canvas繪圖(使用剪切图像數據，旋转、剪切、镜像图像)
d.drawImageByCropPosition = function (objCanvas, imgSrc, cropInfo) {
if (objCanvas != null && cropInfo != null) {
//圖像位置信息
var oPosition = d.getCropPosition(cropInfo);
//圖像處理：旋转 -> 镜像 -> 剪切
d.drawImageTransitionCrop(objCanvas, imgSrc, cropInfo, oPosition);
}
};
};
var canDrawImg = new CanvasDrawImage();
1.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
body {
background-color: #cfcfcf;
}
</style>
<script type="text/javascript">
function el(id) { return document.getElementById(id); };
/**
* 直角三角形 正弦 sin = (对边/斜边)；余弦 cos = (邻边/斜边)；余切 tan = (对边/邻边)。
*
* canvas 画布（ctx = Canvas.getContext("2d")）
* 1.原点：Canvas的左上角(0, 0)；x轴正方向向右；y轴的正方向向下。
* 2.旋转正方向：向右旋转（顺时针旋转）;
* 默认旋转中心：Canvas原点(0, 0)。
* Canvas画布坐标系旋转的角度，单位是弧度。和CSS3的旋转变换不一样，旋转的是坐标系，而非元素。
* ctx.translate(x,y)指将畫布原點移到点(x,y)後，再對图像進行操作(如：旋轉)；
* 坐标系还原到初始原点： ctx.setTransform(1, 0, 0, 1, 0, 0);
* 3.画布大小：最终显示的宽高(可以是图像旋转后的宽高)
* 5. ctx.drawImage()
* ① 在画布上定位图像：ctx.drawImage(img,x,y)
* ② 在画布上定位图像，并规定图像的宽度和高度：ctx.drawImage(img,x,y,width,height)
* ③ 剪切图像，并在画布上定位被剪切的部分：ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
* 参数 描述
* img 规定要使用的图像、画布或视频。
* sx 可选。开始剪切的 x 坐标位置。
* sy 可选。开始剪切的 y 坐标位置。
* swidth 可选。被剪切图像的宽度。
* sheight 可选。被剪切图像的高度。
* x 在画布上放置图像的 x 坐标位置。
* y 在画布上放置图像的 y 坐标位置。
* width 可选。要使用的图像的宽度。（伸展或缩小图像）
* height 可选。要使用的图像的高度。（伸展或缩小图像）
*
* HTML 标签 img旋轉：將图像放进控件中，再以旋转中心进行旋转
* 1.旋转正方向：向右旋转（顺时针旋转）。
* 默认旋转中心: img圖像的中心。transform-origin:center;transform:rotate(45deg);
* 2.元素控件最终显示的宽高与设置的img style的宽高可能不同；img.style的宽高是图片的原始宽高。
*
**/
function RotatePhoto() {
function el(id) { return document.getElementById(id); };
//保留n位小数（四舍五入）
function round(num, n) { return Number(num.toFixed(n)); };
var r = this;
//處理角度, 防止輸入大於360或負數的度數
r.getRotate = function (rotate) {
rotate = rotate % 360;
if (rotate < 0)
rotate = 360 + rotate;
return rotate;
};
//解析最大宽度或高度约束
r.parseSizeMax = function (w, h, max) {
var scale = 1;
var rw = w, rh = h;
//横向及方形
if (w >= h) {
if (w > max) {
scale = w / max;
rw = max;
rh = (h * scale).toFixed(2);
}
} else {
//纵向
if (h > max) {
scale = h / max;
rw = (w * scale).toFixed(2);
rh = max;
}
}
return { width: rw, height: rh, scale: scale };
};
//角度转弧度计算（公式：radian = degree * Math.PI / 180）
r.calculateRotateRadian = function (rotate) {
return (rotate * Math.PI / 180);
};
//計算旋轉指定角度後，新的圖像寬高及旋轉中心(Cancas畫布)
r.calculatePointCoordinates = function (rotate, w, h) {
rotate = r.getRotate(rotate);
//角度转弧度
var rotateRadian = r.calculateRotateRadian(rotate);
var o = {
DrawX: 0, //(cancas畫布)起始坐標x
DrawY: 0, //(cancas畫布)起始坐標y
SourceWidth: w, //原始寬
SourceHeight: h, //原始高
Rotate: rotate, //旋轉角度
Radian: rotateRadian, //旋轉弧度
Width: w, //旋轉後的寬
Height: h, //旋轉後的高
TransformOrigin: { X: 0, Y: 0 }, //(cancas畫布)旋轉中心平移坐標
Left: 0, //(img元素標籤)旋轉後的圖像需左移的距離
Top: 0 //(img元素標籤)旋轉後的圖像需下移的距離
};
if (rotate != 0) {
//坐標計算參考系：原點(0,0)：圖像左上角，x軸正方向：向右，y軸的正方向：向上，旋轉中心：原點
//圖像沒有作任何旋轉時，圖像四個角的坐標值(左上、右上、右下、左下)
var ix1 = 0, iy1 = 0;
var ix2 = w, iy2 = 0;
var ix3 = w, iy3 = -h;
var ix4 = 0, iy4 = -h;
//圖像旋轉一定弧度後，四個角的坐標值(左上、右上、右下、左下)
var rx1 = round((Math.cos(rotateRadian) * ix1 + Math.sin(rotateRadian) * iy1), 2);
var ry1 = round((-Math.sin(rotateRadian) * ix1 + Math.cos(rotateRadian) * iy1), 2);
var rx2 = round((Math.cos(rotateRadian) * ix2 + Math.sin(rotateRadian) * iy2), 2);
var ry2 = round((-Math.sin(rotateRadian) * ix2 + Math.cos(rotateRadian) * iy2), 2);
var rx3 = round((Math.cos(rotateRadian) * ix3 + Math.sin(rotateRadian) * iy3), 2);
var ry3 = round((-Math.sin(rotateRadian) * ix3 + Math.cos(rotateRadian) * iy3), 2);
var rx4 = round((Math.cos(rotateRadian) * ix4 + Math.sin(rotateRadian) * iy4), 2);
var ry4 = round((-Math.sin(rotateRadian) * ix4 + Math.cos(rotateRadian) * iy4), 2);
//旋轉後的寬、高(用對角坐標求得)
o.Width = Math.max(Math.abs(rx1 - rx3), Math.abs(rx2 - rx4));
o.Height = Math.max(Math.abs(ry1 - ry3), Math.abs(ry2 - ry4));
//(cancas畫布)圖像旋轉前，旋轉中心需要平移坐標點
o.TransformOrigin.X = Math.abs(Math.min(rx1, rx2, rx3, rx4));
o.TransformOrigin.Y = Math.abs(Math.max(ry1, ry2, ry3, ry4));
//(img元素標籤)旋轉後的圖像需左移或下移的距離
o.Left = (o.Width - o.SourceWidth) / 2;
= (o.Height - o.SourceHeight) / 2;
}
return o;
};
//HTML 标签 canvas
r.parseCanvaseRotateSize = function (rotate, w, h, x, y) {
var o = r.calculatePointCoordinates(rotate, w, h);
return o;
};
//(作參考用) 解析圖片旋轉後的寬高(0,90,180,270)(HTML 标签 img)
r.parseImgRotateSize = function (rotate, w, h, x, y) {
rotate = r.parseRotate(rotate);
var size = new Object();
/*
obj.style.cssText = string.format("width:{0}px;height:{1}px;left:{2}px;top:{3}px;transformOrigin:center;transform:rotate({4}deg);",
size.width,size.height,size.x,size.y,size.rotate)
*/
if (rotate % 180 != 0 && rotate % 90 == 0) {
var rx = Math.floor((w - h) / 2);
var ry = Math.floor((h - w) / 2);
size.width = h;
size.height = w;
size.x = -(x - rx);
size.y = -(y - ry);
}
else {
size.width = w;
size.height = h;
size.x = -x;
size.y = -y;
}
size.rotate = rotate;
return size;
};
//(作參考用) 计算旋转中心 (HTML 标签 canvas)
r.calculateTransformOrigin = function (rotate, w, h) {
rotate = r.parseRotate(rotate);
var ar = rotate % 90;
var arAngle = (ar * Math.PI / 180);
var x = y = 0;
switch (rotate) {
case 0: x = y = 0; break;
case 90: x = h; y = 0; break;
case 180: x = w; y = h; break;
case 270: x = 0; y = w; break;
default:
if (rotate > 0 && rotate < 90) {
x = Math.abs(Math.sin(arAngle) * h);
y = 0;
}
else if (rotate > 90 && rotate < 180) {
x = Math.abs(Math.cos(arAngle) * h) + Math.abs(Math.sin(arAngle) * w);
y = Math.abs(Math.sin(arAngle) * h) || Math.abs(Math.cos(arAngle) * w);
}
else if (rotate > 180 && rotate < 270) {
x = Math.abs(Math.cos(arAngle) * w);
y = Math.abs(Math.cos(arAngle) * h + Math.abs(Math.sin(arAngle) * w));
}
else if (rotate > 270 && rotate < 360) {
x = 0;
y = Math.abs(Math.cos(arAngle) * w);
}
break;
}
return { x: x, y: y };
};
};
var rPhoto = new RotatePhoto();
function renderCanvas(rotate) {
var objCanvas = el("canvasContainer");
//取畫布的上下文
var context = objCanvas.getContext("2d");
if (context != null) {
var objImg = new Image();
objImg.src = "../img/5x4.png";
var imgSourceWidth = 500;
var imgSourceHeight = 400;
var size = rPhoto.parseCanvaseRotateSize(rotate, imgSourceWidth, imgSourceHeight);
objImg.onload = function () {
//清除上下文
context.clearRect(0, 0, objCanvas.width, objCanvas.height);
objCanvas.width = size.Width;
objCanvas.height = size.Height;
context.translate(size.TransformOrigin.X, size.TransformOrigin.Y);
context.rotate(size.Radian);
//context.drawImage(objImg, size.DrawX, size.DrawY, size.SourceWidth, size.SourceHeight);
var sx = 50
var sy = 25
var swidth = 450
var sheight = 375
context.drawImage(objImg, sx, sy, swidth, sheight, size.DrawX, size.DrawY, size.SourceWidth, size.SourceHeight);
//坐标系还原到初始原点
context.setTransform(1, 0, 0, 1, 0, 0);
};
var oImg = el("imgFirst");
oImg.style.cssText = ""
+ "margin-left:" + size.Left + "px;"
+ "margin-top:" + + "px;"
+ "transform-origin:center;"
+ "transform:rotate(" + size.Rotate + "deg);"
}
};
</script>
</head>
<body>
<div style="float:left; padding: 0 30px;border:0px solid #ff006e;">
<img id="imgFirst" src="../img/5x4.png" />
</div>
<div id="divLayoutBox" style="float:left">
<canvas id="canvasContainer" width="500" height="500" style="border:1px solid #ff006e;"></canvas>
</div>
</body>
</html>View Code
2. 樣例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
body {
background-color: #cfcfcf;
}
</style>
<script src="dn_canvas_drawimage.js"></script>
<style>
body {
background: #3e3e3e;
}
.box {
position: relative;
width: auto;
}
.source-image {
display: block;
margin: auto;
}
.crop-box {
display: none;
position: absolute;
top: 0;
left: 366px;
height: 293px;
width: 500px;
border: 1px solid red;
}
canvas{
background-color: #fff;
}
</style>
<script>
function el(id) { return document.getElementById(id); };
window.onload = function () {
var objCanvas = el("canvasImg");
var imageSrc = "./6C5EF58D49C23E4AD4FFAA319629E12A0118C7B9_ed.jpg";
var oCropInfo_1 = { "ID": "1", "Exp": "jpg", "X": 834, "Y": 0, "Width": 1137, "Height": 735, "CropX": 0, "CropY": 0, "CropWidth": 1137, "CropHeight": 666, "CropRotate": 0, "Rotate": 0, "Zoom": 2, "Scale": 2.276, "FlipHorizontal": "N", "FlipVertical": "N", "Sharpen": "N", "Filter": "", "Brightness": 0, "ThumbnailScale": 2.7889, "AllowEdit": "Y", "AllowMove": "Y", "Alpha": 1, "Resolution": 150, "Index": 0, "Quality": "Y", "AutoDirection": "N", "ApplyMask": "N", "IsEmpty": false, "IsUsePhotoEd": true, "ActualRotate": 0, "IsUseImageEd": true };
var oCropInfo_2 = { "ID": "2", "Exp": "jpg", "X": 799, "Y": 780, "Width": 1137, "Height": 886, "CropX": 0, "CropY": 0, "CropWidth": 1137, "CropHeight": 666, "CropRotate": 0, "Rotate": 15, "Zoom": 2, "Scale": 2.276, "FlipHorizontal": "N", "FlipVertical": "N", "Sharpen": "N", "Filter": "", "Brightness": 0, "ThumbnailScale": 3.1592, "AllowEdit": "Y", "AllowMove": "Y", "Alpha": 1, "Resolution": 150, "Index": 0, "Quality": "Y", "AutoDirection": "N", "ApplyMask": "N", "IsEmpty": false, "IsUsePhotoEd": true, "ActualRotate": 15 };
var oCropInfo_3 = { "ID": "3", "Exp": "jpg", "X": 0, "Y": 85, "Width": 1137, "Height": 836, "CropX": 0, "CropY": 0, "CropWidth": 1137, "CropHeight": 666, "CropRotate": 0, "Rotate": 0, "Zoom": 1, "Scale": 2.276, "FlipHorizontal": "Y", "FlipVertical": "N", "Sharpen": "N", "Filter": "", "Brightness": 0, "ThumbnailScale": 1.0003, "AllowEdit": "Y", "AllowMove": "Y", "Alpha": 1, "Resolution": 150, "Index": 0, "Quality": "N", "AutoDirection": "N", "ApplyMask": "N", "IsEmpty": false, "IsUsePhotoEd": false, "ActualRotate": 0 };
var oCropInfo_4 = { "ID": "4", "Exp": "jpg", "X": 117, "Y": 218, "Width": 1137, "Height": 954, "CropX": 0, "CropY": 0, "CropWidth": 1137, "CropHeight": 666, "CropRotate": 0, "Rotate": 15, "Zoom": 1.1557, "Scale": 2.276, "FlipHorizontal": "Y", "FlipVertical": "Y", "Sharpen": "N", "Filter": "#000000", "Brightness": 0, "ThumbnailScale": 1.1557, "AllowEdit": "Y", "AllowMove": "Y", "Alpha": 1, "Resolution": 150, "Index": 0, "Quality": "N", "AutoDirection": "N", "ApplyMask": "N", "IsEmpty": false, "IsUsePhotoEd": false, "ActualRotate": 15 };
canDrawImg.drawImageByCropPosition(el("canvasImg"), imageSrc, oCropInfo_1);
canDrawImg.drawImageByCropPosition(el("canvasImg2"), imageSrc, oCropInfo_2);
canDrawImg.drawImageByCropPosition(el("canvasImg3"), imageSrc, oCropInfo_3);
canDrawImg.drawImageByCropPosition(el("canvasImg4"), imageSrc, oCropInfo_4);
};
</script>
</head>
<body>
<div class="box">
<img id="sourceImg" class="source-image" src="./6C5EF58D49C23E4AD4FFAA319629E12A0118C7B9_ed.jpg">
</div>
<canvas id="canvasImg"></canvas>
<canvas id="canvasImg2"></canvas>
<canvas id="canvasImg3"></canvas>
<canvas id="canvasImg4"></canvas>
</body>
</html>View Code
3. 樣例效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
