在触屏端上传图片input的type="file"，拖拽文字域，进行div的contenteditable="true"编辑，再将通过html2canvas.js插件将HTML生成为图片

1.html

<!--最终的图片容器-->
<img id="jt_img"  style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: none;"/>
<!--自己的画布-->
<canvas id="ourCanvas" style="position: absolute; left: 0;top:0; z-index: -1; opacity: 0"></canvas>
<!--需要生成图片的HTML容器-->
<div class="box" id="jt" style="position: relative;width: 100%;height: 100%;">
	<!--编辑的拖拽滑块容器-->		
	<div id="div1" contenteditable="true"></div>
	<!--上传图片的预览容器-->
	<img id="preview"  style="width: 100%;"/>
</div>

<!--按钮容器-->
<div style="top: 500px;position: absolute;left: 50px;">
	<!--input的type=file上传文件-->
	<input type="file" id="filePicker" style=""/>
	<!--点击生成最终的图片的按钮-->
	<button id="btn">生成</button>
</div>

2.css

* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
}			
#div1 {
	width: 50px;
	height: 50px;
	background: cyan;
	position: absolute;
}

3.js（拖拽分转自：https://www.jianshu.com/p/750ca057bb3d）

<script src=" https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="html2canvas.js" type="text/javascript"></script>
<script type="text/javascript">
	/*
	 *上传图片部分处理：
	 * 1.上传input的type=file使用
	 * 2.生成预览底图
	 * */
	//input的type=file实现上传文件
	var upLoadControl = function() {
		var filePicker = document.getElementById('filePicker')
		filePicker.addEventListener('change', function(e) {
			//判断是否支持FileReader
			if(window.FileReader) {
				
			} else {
				alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
				return false;
			}
			
			//如果支持h5图片上传属性则往下走
			var file = e.target.files[0];
			//判断获取的是否为图片文件  
			if(!/image\/\w+/.test(file.type)){
				alert("请确保文件为图像文件");
				return false;
			}else {
				previewPic(file)
			}
		})
	}();
	//预览图
	function previewPic(file) {
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e) {
			//获取图片dom
			var img = document.getElementById("preview");
			//图片路径设置为读取的图片
			img.src = e.target.result;
		}				
	}		
	/*
	 * 拖拽部分的处理
	 * */
	var div1 = document.querySelector('#div1');
	//限制最大边界，不让拖拽滑块脱离最大容器
	var maxW = document.body.clientWidth - div1.offsetWidth;
	var maxH = document.body.clientHeight - div1.offsetHeight;
	//手指触摸开始，记录div的初始位置
	div1.addEventListener('touchstart', function(e) {
		var ev = e || window.event;
		var touch = ev.targetTouches[0];
		oL = touch.clientX - div1.offsetLeft;
		oT = touch.clientY - div1.offsetTop;
		document.addEventListener("touchmove", defaultEvent, false);
	});
	//触摸中的，位置记录
	div1.addEventListener('touchmove', function(e) {
		var ev = e || window.event;
		var touch = ev.targetTouches[0];
		var oLeft = touch.clientX - oL;
		var oTop = touch.clientY - oT;
		if(oLeft < 0) {
			oLeft = 0;
		} else if(oLeft >= maxW) {
			oLeft = maxW;
		}
		if(oTop < 0) {
			oTop = 0;
		} else if(oTop >= maxH) {
			oTop = maxH;
		}
		div1.style.left = oLeft + 'px';
		div1.style.top = oTop + 'px';
	});
	//触摸结束时的处理
	div1.addEventListener('touchend', function() {
		document.removeEventListener("touchmove", defaultEvent);
	});
	//阻止默认事件
	function defaultEvent(e) {
		e.preventDefault();
	}
	
	/*
	 *html2canvas将html生成图片部分：
	 * 1.对画布等一些进行初始化设置
	 * 2.生成图片
	 * */
	//截图
	var canvas = document.getElementById("ourCanvas");
	var width = $(window).width(); //获取dom 宽度
	var height = $(window).height(); //获取dom 高度
	var scale = 2;

	function InitCanvas() {
		canvas.width = width * scale;
		canvas.height = height * scale;
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		var context = canvas.getContext("2d");
		context.scale(scale, scale); //然后将画布缩放，将图像放大两倍画到画布上
	}
	//初始化画布
	InitCanvas();

	$("body").css("height", document.body.clientHeight + "px");			
	//点击按钮生成图片
	$("#btn").on("click",function(){
		console.log(1)
		setTimeout(function() {
			setTimeout(function() {
				html2canvas($("#jt"), {
					scale: scale, // 添加的scale 参数
					canvas: canvas, //自定义 canvas
					width: width, //dom 原始宽度
					height: height,
					useCORS: true // 【重要】开启跨域配置

				}).then(function(canvas) {
					$("#jt").hide();
					imgData = canvas.toDataURL("image/jpg");
					$("#jt_img").css("display","block")
					$("#jt_img").attr("src", imgData);
					console.log('222')
				});
			}, 500);
		}, 500)
	});
</script>

4.效果