JavaScrip实现图片压缩与分辨率等比例缩放，

JavaScrip实现图片压缩与分辨率等比例缩放，

实现代码

<input type="file" id="file" />
<script>
    function imageScale(width, originWidth, originHeight) {
        const scaleRatio = width / originWidth;
        const scaleHeight = scaleRatio * originHeight;
        return [width, scaleHeight];
    }

    function compress(file, scaleWidth, quality = 0.5) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (e) => {
                let img = new Image();
                img.src = e.target.result;
                img.onload = function () {
                    // 等比例缩放图片
                    const [width, height] = imageScale(
                        scaleWidth,
                        img.width,
                        img.height
                    );
                    let canvas = document.createElement("canvas");
                    img.width = canvas.width = width;
                    img.height = canvas.height = height;
                    let ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    canvas.toBlob(
                        (blob) => {
                            resolve(blob);
                        },
                        "image/jpeg",
                        quality
                    );
                };

                img.onerror = function () {
                    reject();
                };
            };
        });
    }

    file.onchange = function () {
        compress(this.files[0], 200).then((blob) => {
            let url = window.URL.createObjectURL(blob);
            const img = document.createElement("img");
            img.src = url;
            img.width = 200;
            document.body.appendChild(img);
        });
    };
</script>

效果图

方法补充

除了上文的方法，小编还为大家介绍了其他JavaScrip等比压缩图片的方法，希望对大家有所帮助

JS利用Canvas实现图片等比例裁剪、压缩

原理：

图像压缩有两种方式，目前写的方法是两者都支持且能够共同处理

1.图像尺寸裁剪，由大变小

2.尺寸不变，图片质量缩减

引用代码：

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function(callback, type, quality) {
      var canvas = this
      setTimeout(() => {
        var binStr = atob(canvas.toDataURL(type, quality).split(',')[1])
        var len = binStr.length
        var arr = new Uint8Array(len)
        for (var i = 0; i < len; i++) {
          arr[i] = binStr.charCodeAt(i)
        }
        callback(new Blob([arr], { type: type || 'image/png' }))
      })
    }
  })
}

/**
 * 图片压缩
 * @param {object} options 参数
 * @param {string} options.content 图像内容
 * @param {number} options.maxWidth 最大宽度
 * @param {number} options.maxHeight 最大高度
 * @param {number} options.quality 图像质量
 * @example rotateImage({ content: Img, maxWidth: 1000, maxHeight: 1000, quality: 0.8 })
 * @returns {Promise<object>} 结果值
 */
const compressionImage = function(options = {}) {
  if (!options || typeof options !== 'object') {
    throw new Error(`[compressionImage error]: options is not a object`)
  }
  if (!options.content || (typeof options.content !== 'string' && !(options.content instanceof File))) {
    throw new Error(`[compressionImage error]: options.content is not a string or file`)
  }
  if (typeof options.maxWidth !== 'number') {
    throw new Error(`[compressionImage error]: options.maxWidth is not a number`)
  }
  if (typeof options.maxHeight !== 'number') {
    throw new Error(`[compressionImage error]: options.maxHeight is not a number`)
  }
  if (typeof options.quality !== 'number') {
    throw new Error(`[compressionImage error]: options.quality is not a number`)
  }
  return new Promise(resolve => {
    const set = (content, type) => {
      const canvasDOM = document.createElement('canvas')
      const canvasContext = canvasDOM.getContext('2d')
      const img = new Image()
      img.src = content
      img.onload = () => {
        let targetWidth
        let targetHeight
        if (img.width > options.maxWidth && img.height > options.maxHeight) {
          const rate = Math.min(options.maxWidth / img.width, options.maxHeight / img.height)
          targetWidth = img.width * rate
          targetHeight = img.height * rate
        } else if (img.width > options.maxWidth) {
          targetWidth = options.maxWidth
          targetHeight = (options.maxWidth / img.width) * img.height
        } else if (img.height > options.maxHeight) {
          targetHeight = options.maxHeight
          targetWidth = (options.maxHeight / img.height) * img.width
        } else {
          targetWidth = img.width
          targetHeight = img.height
        }
        canvasDOM.width = targetWidth
        canvasDOM.height = targetHeight
        canvasContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, targetWidth, targetHeight)
        const url = canvasDOM.toDataURL(type, options.quality)
        const callback = blob => {
          resolve({ url, blob })
        }
        canvasDOM.toBlob(callback, type, options.quality)
      }
    }
    if (options.content instanceof File) {
      const fileReader = new FileReader()
      fileReader.readAsDataURL(options.content)
      fileReader.onload = e => {
        set(e.target.result, options.content.type)
      }
    } else if (typeof options.content === 'string') {
      const fileContent = options.content.includes('base64,') ? options.content : `data:image/jpeg;base64,${options.content}`
      const fileType =
        options.content.includes('data:image/png;base64,') ? 'image/png'
          : options.content.includes('data:image/gif;base64,') ? 'image/gif' : 'image/jpeg'
      set(fileContent, fileType)
    }
  })
}

调用方式：

const { url, blob } = await compressionImage({
  content: 'base64', //图像base64或file文件
  maxWidth: 1000, //最大宽度
  maxHeight: 600, //最大高度
  quality: 0.7 //图像质量，1为100%，建议选值0.95以下，1输出后的图像较大
})
console.log('压缩后的base64内容', url)
console.log('压缩后的blob文件', blob)

到此这篇关于JavaScrip实现图片压缩与分辨率等比例缩放的文章就介绍到这了,更多相关JavaScrip图片等比缩放内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• JavaScript等比例缩放图片控制超出范围的图片
• javascript简单实现等比例缩小图片的方法
• javascript实现获取图片大小及图片等比缩放的方法
• JavaScript前端实现压缩图片功能
• JavaScript压缩并加密图片的方法你了解吗
• 通过JavaScript实现图片压缩