html5上傳圖片拖拽裁剪插件_jQuery實現頭像上傳裁剪特效代碼4604
核心代碼
$('#avatarInput').on('change', function(e) {
		var filemaxsize = 1024 * 5;//5M
		var target = $(e.target);
		var Size = target[0].files[0].size / 1024;
		if(Size > filemaxsize) {
			alert('圖片過大,請重新選擇!');
			$(".avatar-wrapper").childre().remove;
			return false;
		}
		if(!this.files[0].type.match(/image.*/)) {
			alert('請選擇正確的圖片!')
		} else {
			var filename = document.querySelector("#avatar-name");
			var texts = document.querySelector("#avatarInput").value;
			var teststr = texts; //你這里的路徑寫錯了
			testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
			filename.innerHTML = testend;
		}
	
	});

	$(".avatar-save").on("click", function() {
		var img_lg = document.getElementById('imageHead');
		// 截圖小的顯示框內的內容
		html2canvas(img_lg, {
			allowTaint: true,
			taintTest: false,
			onrendered: function(canvas) {
				canvas.id = "mycanvas";
				//生成base64圖片數據
				var dataUrl = canvas.toDataURL("image/jpeg");
				var newImg = document.Element("img");
				newImg.src = dataUrl;
				imagesAjax(dataUrl)
			}
		});
	})
	
	function imagesAjax(src) {
		var data = {};
		data.img = src;
		data.jid = $('#jid').val();
		$.ajax({
			url: "upload-logo.php",
			data: data,
			type: "POST",
			dataType: 'json',
			success: function(re) {
				if(re.status == '1') {
					$('.user_pic img').attr('src',src );
				}
			}
		});
	}

技術討論區(3 個討論)

  1. 放飛自我 3

    放飛自我

    很好, 滿足我的需要。 謝謝

    2019-5-17 13:43:11 | 回復

  2. zeiss 2

    zeiss

    沒PHP代碼。。

    2017-6-11 19:21:30 | 回復

  3. 刺猬先森 1

    刺猬先森

    看上去很不錯,學習學習。

    2017-2-20 15:30:13 | 回復

  4. 請先登錄

      發 布
欢乐街机捕鱼赢话费