Question

我正在构建一个Instagram应用，您可以在其中上传图像并为其添加过滤器。上载图像时，您可以使用过滤器预览该图像。在台式机上，滤镜的显示效果很流畅，但是在iPhone 6S上，滚动滤镜的过程比较缓慢且缓慢。过滤器只是CSSGram中的css类。

要可视化的图像：https://1drv.ms/u/s!AuzQwOkGzbwfmZZbYMI6V-Kxk4Myig

我知道在保存之前如何调整文件大小。在检查滤镜图像时，尺寸没有那么大，所以我不明白为什么在iPhone上它这么慢。

// the javascript file
var uploader = document.getElementById('image');

image.addEventListener("change", function(event){
    // select all hidden elements and show them as soon as an image is selected
    var elements = document.querySelector(".filters");
    var imageWrapper = document.querySelector(".imageWrapper");
    elements.style.display="block";
    imageWrapper.style.display="block";
    var image = document.getElementById('output');

    var F_nofilter = document.querySelector(".F_nofilter");
    var F_1977 = document.querySelector(".F_1977");
    var F_aden = document.querySelector(".F_aden");

    var img = event.target.files[0];



    image.src = URL.createObjectURL(img);
    F_nofilter.src=URL.createObjectURL(img);
    F_1977.src=URL.createObjectURL(img);

})

// some of the html code as an example
<div class="formField">
    <label for="image">Upload a picture</label>
    <div class="uploadFileWrapper">
        <input type="file" id="image" name="image"">
    </div>
</div>

<div class="imageWrapper">
    <figure>
        <img id="output" class="uploadedImage" visibility="hidden"/>
    </figure>
</div>

<div class="filters">
    <label for="filters">Select a filter</label>
    <div class="filterContainer">
        <div class="caption">
            <p>normal</p>
            <div class="filterButtons">
                <div class="nofilter">
                    <img class="filterOptions F_nofilter" visibility="hidden"/>
                </div>
            </div>
        </div>
        <div class="caption">
            <p>_1977</p>
            <div class="filterButtons">
                <div class="_1977">
                    <img class="filterOptions F_1977" visibility="hidden"/>
                </div>
            </div>
        </div>

我希望通过调整过滤器图像的大小来在移动设备上获得更好的性能。

Answer 1

即使图像在屏幕上显得很小，其在内存中的表示仍然相同。我假设对单个图像的每个滤镜执行计算就是使它陷入困境。

如果您正在使用向其发送图像的外部库来添加滤镜，则可以使用canvas真正调整图像的大小，并从画布中获取图像对象以馈入外部滤镜添加功能。

function generateSmallPreviewImage(image, saclingFactor) {
  // Create an empty canvas and get its context
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  // This sets the size of the canvas based on the image size and a scaling factor
  // For example: scalingFactor = 0.5 will half the image size on canvas
  canvas.width = image.width * saclingFactor;
  canvas.height = image.height * saclingFactor;

  // This sets the fill color as white
  context.fillStyle = '#fff';

  // This fills the bg with white color in case a png is uploaded with transparency
  context.fillRect(0, 0, canvas.width, canvas.height);

  // Draw image on the canvas. This also scales(resizes) it.
  context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);

  // Create an empty image object
  var image = new Image();

  // Set the image source as a base64 encoded image from canvas
  image.src = canvas.toDataURL('image/jpeg');

  // Return the image
  return image;
}

现在，无论何时从<input type="file"/>中选择图像，都调用此函数，然后调用此函数以获取调整大小的图像。

这是调用函数的一种方法： element_to_append_image_to.appendChild(generateSmallPreviewImage(image_element, 0.5));

让我知道是否需要更多说明。

如何调整临时图像文件的大小以提高性能？

1 个答案: