[英]HTML5 Load smaller image in canvas and save actual size image
我正在使用HTML 5 Canvas和Java脚本创建图像编辑工具。 我通过缩放图像以使其适合画布,应用一些滤镜并将图像保存回磁盘来将大图像加载到画布。
问题是当我将画布保存为图像时,它将以画布大小存储图像。 我要的是使用应用的滤镜将图像存储到其实际尺寸。 Flickr使用的相同方法。
例如
如果图像是1000px X 1000px并显示在300px X 300px的画布中,则我将图像加载为300px X 300px的画布。 在保存的同时,我仍然想使用1000px X 1000px dimesnion保存图像。 怎么做?
我正在使用php,HTML5和Javascript开发。
我想在将图像发送到服务器之前在客户端做所有事情
有帮助吗?
寻找合适的解决方案
找到了。
只需使用CSS和标签属性更改画布大小
CSS宽度和高度调整画布的显示区域标签宽度和高度是实际图像的宽度和高度
例如:
#canvas { width:500px; height:350px}
<canvas id="canvas" width="1024" height="760"></canvas>
上方将显示块为500px x 350px的画布。 但是,当画布保存到图像时,它将以1024x760的图像尺寸保存
使用此链接。 它有完整的教程。
http://www.sitepoint.com/image-resizing-php/
该图像的尺寸将相应更改。
UPDATE
对于客户端
http://ericjuden.com/2009/07/jquery-image-resize/
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.