Emoji unicode

30.12.202130.12.2021 Tomáš

https://www.unicode.org/emoji/charts/emoji-style.txt

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery emojiFace.js: Unicode Emoji Picker Demo</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style>
body { background-color: #ECF0F1; font-family: 'Roboto'; }
.container { margin:150px auto; max-width:300px;}
</style>
</head>
<body>
<div class="container">
	<input type="text" id="faceText" class="form-control" spellcheck="false">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.emojiFace.js"></script>
<script type="text/javascript">
$(function(){

	$('#faceText').emojiInit({
		fontSize:20,
        success : function(data){

		},
        error : function(data,msg){
		}
	});
});
</script>

</body>

</html>

Skládání obrázků v JS

http://jsfiddle.net/4Lzwj7nv/

<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>


<body>
<h4>Drag the house onto the canvas.<br>
    The house will be drawn on the canvas.</h4>

<img id="house" width=32 height=32 src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/houses.png">
<img id="hole" width=32 height=32 src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/hole_punch.png">
<br>
<canvas id="canvas" width=300 height=300></canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var image1=new Image();
var image2=new Image();
image1.src = "https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/houses.png";
image2.src = "https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/hole_punch.png";

var $house=$("#house");
var $hole=$("#hole");

var $canvas=$("#canvas");

$house.draggable({
    helper:'clone',
});
$hole.draggable({
    helper:'clone',
});
// set the data payload
$house.data("image",image1); // key-value pair
$hole.data("image",image2); // key-value pair
$canvas.droppable({
    drop:dragDrop,
	
});


function dragDrop(e,ui){
var self = $(this);
    var element=ui.draggable;
    var data=element.data("url");
    var x=parseInt(ui.offset.left-offsetX);
    var y=parseInt(ui.offset.top-offsetY);
    ctx.drawImage(element.data("image"),x-1,y);

        var sum = 0;
        self.find('img').each(function(index)
                     {
					// console.log($(this));
                         sum += 1;
        });
		console.log(element.data("image"));
	}
</script>
</body>

http://jsfiddle.net/aNreg/43/

Související