- canvas画布，若果每次都在现有canvas基础上缩放图片，n此之后，图片质量会很差，现在解决方法是图片加载到canvas上的时候，保存一份dataURL。之后的resize都基于原图去做。
- 这样 就会带来一个问题，在canvas上画的图形，无法在resize原图时在画布上展示。解决方案，抽象绘制图形为一个对象，保存要花的所有图形。提供绘图接口函数。
- 每次要画一个图形，比如一个框，现将框保存到绘图对象中，然后再调用绘图对象的绘图接口。
- 当resize画布的时候，调用绘图对象的绘图接口，将所有图形往当前画布绘制一次
1，效果展示
2，代码干货
<html>
<head>
<meta charset="utf-8">
<title>canvastitle>
<style>
html, body{
width:100%;
height:100%;
}
.main-area{
position:absolute;
height:80%;
right:10%;
left:10%;
}
.main-area .button-area{
height:30px;
width:100%;
background-color:111111;
}
.main-area .button-area .button-bar ul li:hover{
background-color:#d8cdcf;
cursor:pointer;
}
.main-area .button-area .button-bar ul li{
display:inline-block;
width:30px;
height:20px;
list-style:none;
float:right;
text-align:center;
line-height:20px;
margin-right:5px;
border-radius:10px;
margin-top:5px;
background-color:pink;
}
.main-area .image-area{
position:absolute;
top:30px;
bottom:0;
width:100%;
background-color:gray;
overflow:auto;
}
.main-area .image-area .myCanvas{
position:absolute;
margin:0;
padding:0;
background-color:white;
}
style>
head>
<body>
<div class="main-area">
<div class="button-area">
<div class="input-button" style="display:inline-block; width:40%;float:left;">
<input id="fileOne" type="file" style="padding:4px 5px"/>
div>
<div class="button-bar" style="display:inline-block; width:50%;height:30px;float:right;">
<ul id="id-resize-button" style="margin:0;">
<li>+li>
<li>-li>
<li>画li>
ul>
div>
div>
<div class="image-area">
<canvas id="canvasOne" class="myCanvas">canvas>
div>
<div>
<script >
window.onload = function(){
EventUtils = {
addEventListener : function(element, eventType, func){
if(element.addEventListener) {
element.addEventListener(eventType, func);
}else if(element.attachEvent) {
element.attachEvent("on"+eventType, func);
}else{
element["on"+eventType] = func;
}
},
moveEventListener : function(element, eventType, func){
if(element.removeEventListener) {
element.removeEventListener(eventType, func);
}else if(element.detachEvent) {
element.detachEvent("on"+eventType, func);
}else{
element["on"+eventType] = undefined;
}
},
tirggerEvent : function(element, eventType){
if(document.all) {
element[eventType]();
}
else {
var e = document.createEvent("MouseEvents");
e.initEvent(eventType, true, true);
element.dispatchEvent(e);
}
},
addEventForButtons : function(parentNode, eventType, func)
{
lis = parentNode.children;
for(var i=0; i<lis.length; i++)
{
var node = lis[i];
node.index = i;
if(typeof(func) != "object")
{
EventUtils.addEventListener(node, eventType, func);
continue;
}
for(var j=0; j<func.length; j++){
fun = func[j];
EventUtils.addEventListener(node, eventType, fun);
}
}
}
}
var canvasObj = {
canvas : document.getElementById('canvasOne'),
drawInfo : {
lines : [],
rects : [],
pointLists : [],
clear : function(){
this.lines = [];
this.rects = [];
this.pointLists = [];
},
drawRect : function(rect){
var ctx = canvasObj.canvas.getContext('2d');
var x = rect.x * canvasObj.canvas.width;
var y = rect.y * canvasObj.canvas.height;
var w = rect.w * canvasObj.canvas.width;
var h = rect.h * canvasObj.canvas.height;
ctx.strokeRect(x, y, w, h);
},
draw : function(){
console.log("canvasObj drawInfo draw");
for(var i=0; i< this.rects.length; i++){
this.drawRect(this.rects[i]);
}
}
},
init : function(event){
canvas = this.canvas;
this.reLocateCanvas(0, 0);
document.ondragover = function (event) {
event.preventDefault();
};
document.ondrop = function (event) {
event.preventDefault();
};
canvas.ondragover = function (event) {
event.preventDefault();
};
canvas.ondrop = function (event) {
var list = event.dataTransfer.files;
var file = list[0];
canvasObj.readImageToCanvas(file);
};
},
reLocateCanvas : function(width, height) {
var canvas = this.canvas;
var parentNode = canvas.parentNode;
var clientW = parentNode.clientWidth;
var clientH = parentNode.clientHeight;
var w = (width == 0? clientW-50:width);
var h = (height == 0? clientH-30:height);
var left = (clientW > w)?Math.floor((clientW - w)/2):0;
var top = (clientH > h)?Math.floor((clientH - h)/2):0;
console.log("reLocateCanvas client[%d,%d] wh[%d, %d] left[%d] height[%d]", clientW, clientH, w, h, left, top);
canvas.style.left = left+"px";
canvas.style.top = top+"px";
var ctx = canvas.getContext('2d');
ctx.canvas.setAttribute("width", w);
ctx.canvas.setAttribute("height", h);
parentNode.style.overflowW = (clientW > w)?"hidden":"scroll";
parentNode.style.overflowY = (clientH > h)?"hidden":"scroll";
},
resizeCanvas : function(op){
var ctx = this.canvas.getContext('2d');
console.log("resizeCanvas canvas.client[%d, %d] op[%d]", this.canvas.clientWidth, this.canvas.clientHeight, op);
var width = this.canvas.clientWidth + op*(this.canvas.clientWidth*0.1);
var height = this.canvas.clientHeight + op*(this.canvas.clientHeight*0.1);
this.showCanvas(this.srcDataUrl, width, height);
},
showCanvas : function(dataUrl, width, height) {
var ctx = this.canvas.getContext('2d');
var img = new Image();
img.onload = function() {
if(width == 0 || height == 0){
var ratioW = canvasObj.canvas.parentNode.clientWidth/img.width;
var ratioH = canvasObj.canvas.parentNode.clientHeight/img.height;
if(ratioW < ratioH){
width = img.width * ratioW;
height = img.height * ratioW;
}else{
width = img.width * ratioH;
height = img.height * ratioH;
}
}
canvasObj.reLocateCanvas(width, height);
ctx.drawImage(img, 0, 0, width, height);
canvasObj.drawInfo.draw();
}
img.src = dataUrl;
},
readImageToCanvas : function (file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
canvasObj.srcDataUrl = reader.result;
canvasObj.drawInfo.clear();
canvasObj.showCanvas(reader.result, 0, 0);
}
},
drawRect : function(fX, fY, fW, fH){
this.drawInfo.rects.push({x:fX,y:fY,w:fW,h:fH});
this.drawInfo.draw();
}
}
inputChangefun = function (event) {
var fileList = event.target.files;
var file = fileList[0];
canvasObj.readImageToCanvas(file);
}
resizeCanvasByButton = function(event){
if(event.target.index > 1){
canvasObj.drawRect(0.2, 0.3, 0.5, 0.5);
return;
}
var op = (event.target.index==0)?1:-1;
canvasObj.resizeCanvas(op);
}
canvasObj.init();
EventUtils.addEventListener(document.getElementById('fileOne'), "change", inputChangefun);
EventUtils.addEventForButtons(document.getElementById("id-resize-button"), "click", resizeCanvasByButton);
}
script>
<body>
html>
