Question

我的代码看起来像https://cloth.ardive.id/Tshirt/index.html

我想将画布作为图像发送到用户需要填写一些插件信息（名称，类别）的表单，并且在此表单中显示之前的页面图像，用户不再需要上传图像。因此，当他们提交表单时，提交的表单包含带有图像的填充信息数据

因为我想发送不是图像的画布，所以我们需要将画布生成图像，然后将其发送到表单。

这就是我的表单代码的外观（我使用wordpress和woocommerce，但这段代码是html）。我想要的是导航到已经上传到该字段的图像的表单页面

＆＃13;

<script type="text/javascript">

            wpuf_conditional_items.push();

        </script>
        </li><li class="wpuf-el featured_image" data-label="Gambar">        <div class="wpuf-label">
            <label for="wpuf-featured_image">Gambar <span class="required">*</span></label>
        </div>
        
        <div class="wpuf-fields">
            <div id="wpuf-featured_image-upload-container" style="position: relative;"><div class="wpuf-file-warning"></div>
                <div class="wpuf-attachment-upload-filelist" data-type="file" data-required="yes">
                    <a id="wpuf-featured_image-pickfiles" data-form_id="4244" class="button file-selector  wpuf_featured_image_4244" href="https://cloth.ardive.id/buat-produk/#" style="position: relative; z-index: 1;">Select Image</a>

                    <ul class="wpuf-attachment-list thumbnails">
                                            </ul>
                </div>
            <div id="html5_1b67l1c6qtdqmec190711k33v46_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 106px; height: 29px; overflow: hidden; z-index: 0;"><input id="html5_1b67l1c6qtdqmec190711k33v46" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,.jpg,.jpeg,image/gif,.gif,image/png,.png,image/bmp,.bmp"></div></div><!-- .container -->

            <span class="wpuf-help">Masukkan Gambar, gambar harus dengan resolusi tertinggi</span>

        </div> <!-- .wpuf-fields -->

        <script type="text/javascript">
            jQuery(function($) {
                new WPUF_Uploader('wpuf-featured_image-pickfiles', 'wpuf-featured_image-upload-container', 1, 'featured_image', 'jpg,jpeg,gif,png,bmp', 8000);
            });
        </script>

＆＃13;

这是将已经从画布生成的图像保存到用户桌面的代码代码在canvas2image.js

上

＆＃13;

    // sends the generated file to the client
    	var saveFile = function(strData) {
    		document.location.href = strData;
    	}
    
    	var makeDataURI = function(strData, strMime) {
    		return "data:" + strMime + ";base64," + strData;
    	}
    
    	// generates a <img> object containing the imagedata
    	var makeImageObject = function(strSource) {
    		var oImgElement = document.createElement("img");
    		oImgElement.src = strSource;
    		return oImgElement;
    	}
    
    	var scaleCanvas = function(oCanvas, iWidth, iHeight) {
    		if (iWidth && iHeight) {
    			var oSaveCanvas = document.createElement("canvas");
    			oSaveCanvas.width = iWidth;
    			oSaveCanvas.height = iHeight;
    			oSaveCanvas.style.width = iWidth+"px";
    			oSaveCanvas.style.height = iHeight+"px";
    
    			var oSaveCtx = oSaveCanvas.getContext("2d");
    
    			oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);
    			return oSaveCanvas;
    		}
    		return oCanvas;
    	}
    
    	return {
    
    		saveAsPNG : function(oCanvas, bReturnImg, iWidth, iHeight) {
    			if (!bHasDataURL) {
    				return false;
    			}
    			var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
    			var strData = oScaledCanvas.toDataURL("image/png");
    			if (bReturnImg) {
    				return makeImageObject(strData);
    			} else {
    				saveFile(strData.replace("image/png", strDownloadMime));
    			}
    			return true;
    		}

＆＃13;

这是另一个将功能分类的js

＆＃13;

//export options
   $('.exportas').click(function(){
        // get type to export
        var to = $(this).data('type');
       // alert(to);
       // get our canvas
       var oCanvas = document.getElementById("mycanvas");  
    // support variable
    var bRes = false;
        if(to == 'png'){
            // export to png 
            bRes = Canvas2Image.saveAsPNG(oCanvas);
        }
        if(to == 'jpg'){
            // maybe in some old browsers it works only on Firefox
            bRes = Canvas2Image.saveAsJPEG(oCanvas);
        }if(to == 'bmp'){
            Res = Canvas2Image.saveAsBMP(oCanvas);
        }
        // if browser doesn't support mimetype alert user
        if (!bRes) {
            alert("Sorry, this browser is not capable of saving " + strType + " files!");
            return false;
        }

＆＃13;

在index.html上，它看起来像这样

＆＃13;

<!-- export option (png, jpg, bmp) -->
                                <li>
                                    <div class="btn-group dropup">

                                      <a class="dropdown-toggle export btn" data-toggle="dropdown" href="#">
                                        Export
                                        <span class="caret"></span>
                                      </a>

                                      <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" class="exportas" data-type='png'>PNG</a>
                                            <a href="#" class="exportas" data-type='jpg'>JPG</a>
                                            <a href="#" class="exportas" data-type='bmp'>BMP</a>
                                        </li>

＆＃13;

所以我想问你的是，如何制作代码将图像发送到表单（表单在另一页面上），上面已经提到过我的细节。感谢

将带有js和html的图像发送到表单中

0 个答案: