javascript - 如何避免溢出PNG帧？

Question

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

当我将 JPG 格式的图像拖到PNG格式化的框架时，(jQuery's drag and drop function)我的格式化图像会通过PNG 格式的框架JPG溢出。我不希望图像溢出我的 PNG 框架。我怎样才能克服它？JPG

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

Answer 1

假设允许 HTML5 Canvas：-

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

Answer 2

有良好支持的画布和 SVG 解决方案，以及对CSS Masks的前沿支持。