相关疑难解决方法(0)

我正在寻找一种优雅的方法来生成与FileAPI一起使用的缩略图.目前我得到一个表示图像的DataURL.问题是,如果图像非常大,则移动它并重新渲染它会变得CPU密集.我可以看到两个选项来解决这个问题.

• 在客户端上生成缩略图
• 在服务器上生成缩略图,将缩略图发送回客户端(AJAX).

随着HTML5我们有一个canvas元素？有谁知道如何使用它从图片生成缩略图？它们不一定非常完美 - 取样质量是可以接受的.有jQuery插件可以帮我吗？有没有其他方法可以加速客户端使用大图像？

我正在使用HTML5,并且Firefox 3.6+:除了之外没有必要支持任何其他内容Firefox 3.6+,请不要提供建议IE 6.0

我有一个小图像,我在画布上渲染,像这样:

ctx.drawImage(img, 0, 0, img.width*2, img.height*2);

我希望这能显示一个急剧增大的图像(每个图像像素有4个相同的像素).但是,此代码(在Mac上的Chrome 29中)会产生模糊的图像.在Photoshop术语中,它看起来像是使用"Bicubic"重采样,而不是"最近邻".

在的情况下,将是有用的(例如,一个复古的游戏),是否有可能产生清晰的升迁图像,或者我需要有服务器上的图像的每一个尺寸一个单独的图像文件？

我们想模拟Imagemagick功能,但仅限于Javascript.存在任何库吗？

具体而言,目标是显示图像的缩略图而不将缩略图扭曲到几乎不像原始图像的点.这通常通过CSS简单调整大小来实现.

一种方法是使用Imagemagick调整服务器上的图像大小.

问题是,如果我们不想存储缩略图(因为原件是从不提供缩略图的第三方加载的),我们可以使用Javascript库模拟Imagemagick的自然和高保真调整大小功能吗？

谢谢!

我注意到IE9以非常低的质量呈现尺寸缩小的图像:如果我在200x150 IMG标签中显示800x600 jpg图像,IE9中的结果非常令人失望.

在IE8和Chrome中,同一页面显示完美.IE7也行,只要我使用CSS样式-ms-interpolation-mode: bicubic;).Firefox显示与IE9相同的令人沮丧的结果,但这似乎是一个已知的错误,请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=486918

我已经搜索了Stack Overflow和其他论坛,但没有发现有关IE9渲染与IE8的任何投诉.

有没有人知道这是IE9中的一个错误.有解决方法吗？

我无法提交图片,因为我是Stack Overflow的新用户.但您可以轻松重现该问题:

在Paint.Net中创建一个带有画笔宽度为1或2的椭圆的800x600.jpg.以200px x 150px IMG标签显示此图像将IE9与Chrome和IE8进行比较(使用IEtester)

我正在制作和图像上传页面,客户端图像大小调整(使用HTML5画布).一切正常,但问题是图像质量不是很好.

这是一个指向(正在进行中)照片库的链接,其中包含我调整大小/上传代码生成的图像.

你能看出我质量差的意思吗？锯齿状边缘很多,特别是在缩略图上.有关如何解决此问题的任何想法？

这是我生成缩略图的javascript:

img.onload = function()
{
   var canvasWidth = 150;
   var canvasHeight = 150;
   var Rz = resizeCanvasSmall(img,canvasID,canvasWidth,canvasHeight);

   ctx.drawImage(img,Rz[0],Rz[1],Rz[2],Rz[3],Rz[4],Rz[5],Rz[6],Rz[7]);
   dataurl = canvas.toDataURL("image/jpeg",0.8);  // File type and quality (0.0->1.0)
   UploadFile();
}


// Function to resize canvas (for thumbnail images)
// img = image object, canvas = canvas element ID
function resizeCanvasSmall(img,canvas,width,height)
{
var sx; //The x coordinate where to start clipping
var sy; //The y coordinate where to start clipping
var swidth; //The width of the …

我试图以canvas与CSS相同的视觉保真度渲染缩放图像.

根据我的测试(在Chrome版本43.0.2357.130中完成),它似乎不是Lanczos3,即使我使用ResampleScope测试表明它应该是.

看这里:

用于产生这些结果的代码:

"CSS":

<img src="temp.png" style="width:200px;height:200px">

"canvas drawImage":

ctxNative.drawImage(img, 0, 0, 200, 200);

"画布变换":

ctxTransform.transform(200 / img.width, 0, 0, 200 / img.height, 0, 0);
ctxTransform.drawImage(img, 0, 0, img.width, img.height);

"bicubic"(底部为bicubic的代码)

"bicubic#2"

"缩减样本alg."

"lanczos3"

我在 NODEjs 中有一个缓冲区形式的图像，我想调整它的大小。

理论上这应该能够在nodeJS中完成，因为我可以访问包含所有像素数据的缓冲区。

我已经在很多地方找到了一种使用 NATIVE（仅限！）nodejs 调整图像大小的简单方法，没有外部库，但我只找到了使用库的解决方案：https: //www.npmjs.com/package/gm

Node gm - 调整图像大小并保留纵横比？

Node.js：无需 ImageMagick 即可调整图像大小 在 Node.js 中调整图像大小的简单方法？

如何在 Node.js 中调整图像大小？

如何在 Node js 中调整图像大小

Node.js 调整图像大小

在node js中调整图像大小

下载图片并在nodejs中调整大小

使用 Nodejs 和 Imagemagick 调整图像大小

通过保持纵横比nodejs将图像大小调整为精确大小

如何在 Node.js 上调整图像大小

调整大小和裁剪图像并保持纵横比 NodeJS 和 gm

如何使用 multer 在 Node.js 中调整图像大小

尝试使用锐利的 Node.js 调整流图像的大小

Node.js：不使用 ImageMagick 调整图像大小

在nodejs中使用gm调整图像大小而不将其上传到任何地方

使用 jimp 在 Node.js 中调整图像大小并获取新图像的路径

但所有这些解决方案都使用某种库，但我只想使用普通的 NodeJS。

我可以用缓冲区读取像素，所以我应该能够编写一个调整大小的缓冲区，就像这个 C++ 线程http://www.cplusplus.com/forum/general/2615/和许多其他线程一样，只需循环像素并调整它的大小..

我发现这个问题Resizing an image in an HTML5 canvas，它使用纯客户端JavaScript实现了图像调整大小，而不依赖于画布drawImage来调整它的大小（仅获取图像数据），这是他使用的代码：

function lanczosCreate(lobes) {
    return …

我正在使用以下代码捕获所选标签的屏幕截图

chrome.tabs.captureVisibleTab( undefined, function( data ) { display( data ) });

该API表示可以更改标签的大小(http://code.google.com/chrome/extensions/tabs.html#method-captureVisibleTab),但我无法弄清楚如何操作.目前所有截图都以全尺寸(1440x900)出现,但我只需要缩略图尺寸.

有谁知道如何使用这个API来做到这一点？

谢谢.

是否有一个jQuery插件或代码,我可以用它来调整图像(或画布(使用此图像))并将其复制到另一个图像(或画布)？图片#2是一个

编辑:想法:也许利用-moz-transform: scale(sx, sy)/ -webkit-transform: scale(sx, sy)？或者这在HTML5画布中调整图像大小

save(event: any, type, image_type) {
  this.uploadImageFlag = true;
   const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        const file: File = fileList[0]
        this.files.set('files', file, file.name)
        const reader = new FileReader();
        reader.onload = (event: any) => {
        this.url2 = event.target.result;
        this.upload = true;
        }
        reader.readAsDataURL(event.target.files[0]);

    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<input id="input"  type="file" accept="image/*" style=" width: 180px;" #files (change)="save($event)" />

我正在使用以下功能上传图像并将其发送到后端。问题是图像大小非常大，需要时间才能到达后端。我看过很多关于如何压缩图像的例子，但我真的不想改变我现有的代码和修改模块，所以有人可以告诉我如何改变这个函数并压缩图像。

我正在尝试使用 JavaScript 压缩图像大小。但它返回画布错误。下面是我的代码。

 var reader = new FileReader();
        reader.readAsDataURL(fileItem._file);
        reader.onload = function (event) {
            var base64 = event.target.result.substring(event.target.result.indexOf(',') + 1, event.target.result.length);
     var cvs = document.createElement('canvas');
            var source_img_obj = event.target.result;
            cvs.width = source_img_obj.naturalWidth;
            cvs.height = source_img_obj.naturalHeight;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            var newImageData = cvs.toDataURL(type, 70 / 100);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            console.log(result_image_obj);
};

错误：