javascript - 如何避免 PNG 框架溢出？

Question

我必须反对。其中一个是 PNG 格式的图像帧，另一个只是 JPG 格式的图像。

当我将 JPG 格式的图像拖到 PNG 格式的框架时，(jQuery 的拖放功能) 我的 JPG 格式的图像溢出 < strong>PNG 格式的框架。我不希望 JPG 图像溢出我的 PNG 框架。我该如何克服它？

我正在上传一张图片，您会很容易理解我的问题..

Answer 1

假设允许使用 HTML5 Canvas:-

• 在脚本中创建一个新 Canvas 并获取 2d 上下文。
• 将图像绘制到 JPG 图片的上下文中。
• 为您的框架创建第二个 Canvas 并获取其二维上下文。
• 将您的 PNG 图像绘制到第二个 Canvas 上。
• 在两个上下文中调用 getImageData 以获取按 RGBA 顺序排列的两个字节数组。
• 通过检查第二个 Canvas 上的 alpha 并根据需要组合 RGB 来处理每个像素。
• 调用 putImageData 将结果保存回上下文。
• 然后您可以在您在其他脚本中写入的 Canvas 上绘制图像，或使用 canvas.toDataURL("image/png") 获取 src url。