WordPress + WooCommerce 购物车显示个性化产品图片的解决方案：重新生成 vs. 临时图片

2024-03-02 21:46:22

在 WordPress + WooCommerce 中显示购物车中的个性化产品图片

在使用 WordPress 和 WooCommerce 进行个性化定制时，一个常见的问题是如何在购物车页面中显示用户定制的产品图片。特别是当定制画布较大时，通过 canvas.toDataURL 生成的 base64 图片字符串可能会非常大，超过 WordPress MySQL 数据库中的字节限制。

解决方案

有两种可能的解决方案：

1. 在购物车页面重新生成图片

这个解决方案涉及在购物车页面添加一个自定义代码片段，该代码片段重新生成定制图片。它通过 JavaScript 调用 canvas.toDataURL 在浏览器客户端生成图片，无需将其保存在数据库中。

步骤：

转到「外观」>「主题编辑器」。
在右侧面板中，选择「functions.php」文件。
在文件末尾添加以下代码：

add_action('woocommerce_cart_loaded', 'add_custom_canvas_script');

function add_custom_canvas_script() {
    ?>
    <script type="text/javascript">
        // 重新生成画布并将其转换为 base64 字符串
        function regenerateCanvas(canvasId) {
            var canvas = document.getElementById(canvasId);
            var ctx = canvas.getContext('2d');
            var dataURL = canvas.toDataURL();
            
            // 将 base64 字符串附加到购物车项目
            var cartItemKey = document.getElementById('cart-item-' + canvasId).getAttribute('data-key');
            jQuery.ajax({
                url: woocommerce_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'wc_add_custom_canvas_image',
                    cart_item_key: cartItemKey,
                    canvas_image: dataURL
                },
                success: function(response) {
                    console.log(response);
                }
            });
        }
    </script>
    <?php
}