Question

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

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

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

这是将已经从画布生成的图像保存到用户桌面的代码代码在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;

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

Answer 1

所以图片已上传，你只需保存它吗？

$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = 'upload';   //2

$tempFile = $_FILES['file']['tmp_name'];          //3             

$targetPath = dirname( __FILE__ ) . $ds. $new_folder . $ds;  //4

$targetFile =  $targetPath. $_FILES['file']['name'];  //5

move_uploaded_file($tempFile,$targetFile); //6

我认为你可以在php中尝试这样的东西，所以这就是upload.php。你必须实现上传php到你的index.html

将图像作为上传文件发送到表单

1 个答案: