2
Я использую демонстрацию из console.image, чтобы создать простой генератор мем. Мне трудно реагировать. Я пробовал это, но у меня нет примеров, которые полностью показывают мне, как это сделать. Я сделал плункер. Я использую Угловое/материализовать/console.imageКак сделать холст отзывчивым
<body ng-controller="AppCtrl as appCtrl">
<div class="container">
<div class="row">
<div class="col s6 offset-s3 z-depth-4">
<div class="card-panel teal">
<div class="row">
<div class="col s12">
<div class="card-panel teal canvas"></div>
</div>
<div class="row">
<div class="input-field col s12">
<select class="browser-default" ng-model="selectedMeme" ng-init="selectedMeme = memes[0]" ng-change="alterMeme()" ng-options="m.name for m in memes"></select>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="text" placeholder="" id="top_text" class="validate" ng-model="toptext" ng-change="alterMeme()" />
<label for="top_text">Top Text</label>
</div>
<div class="input-field col s6">
<input type="text" id="bottom_text" class="validate" ng-model="bottomtext" ng-change="alterMeme()" />
<label for="bottom_text">Bottom Text</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a class="waves-effect waves-light btn" ng-click="create()">
<i class="material-icons left"></i>
Save Image</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
console.image.js
(function(console) {
"use strict";
//Bootlegged of imgur.com/memegen
var memes = {
"Rudy": "http://i.imgur.com/1nJv40n.jpg"
};
var canvas = document.createElement("canvas");
console.list = memes;
function drawMemeText(ctx, type, text, width, y) {
text = text.toUpperCase();
//Determine the font size
if (text.length < 24) {
var val = Math.max(0, text.length - 12),
size = 70 + (val * -3);
drawText(ctx, size, text, width/2, y);
} else if (text.length < 29) {
drawText(ctx, 40, text, width/2, y);
} else {
var strs = wrap(text, 27);
strs.forEach(function (str, i) {
drawText(ctx, 40, str, width/2, (type == "lower") ? (y - ((strs.length - 1) * 40)) + (i * 40) : y + (i * 40));
});
}
}
function drawText(ctx, size, text, x, y) {
//Set the text styles
ctx.font = "bold " + size + "px Impact";
ctx.fillStyle = "#fff";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 7;
ctx.strokeStyle = "#000";
ctx.strokeText(text, x, y);
ctx.fillText(text, x, y);
}
function wrap(text, num) {
var output = [],
split = text.split(" ");
var str = [];
for (var i = 0, cache = split.length; i < cache; i++) {
if ((str + split[i]).length < num) str.push(split[i])
else {
output.push(str.join(" "));
str.length = 0;
str.push(split[i]);
}
}
//Push the final line
output.push(str.join(" "));
return output;
}
console.meme = function (upper, lower, image, width, height) {
if (!upper && !lower && !image) return console.log("> " + Object.keys(memes).join("\n> "));
var ctx = canvas.getContext("2d"),
width = width || 500,
height = width || 500,
//I tweaked it at these dimensions,
//So everything scales from here
_w = 500, _h = 500;
ctx.clearRect(0, 0, width, height);
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function() {
canvas.width = width;
canvas.height = height;
var text = upper.toUpperCase();
ctx.scale(width/500, height/500);
//Draw the background
ctx.drawImage(this, 0, 0, _w, _h);
drawMemeText(ctx, "upper", upper, _w, 50); //upper
drawMemeText(ctx, "lower", lower, _w, _h - 50); //upper
//my lil' hack
canvas.id = 'myCanvas';
$('.canvas').html(canvas);
};
if (memes[image]) var url = memes[image];
else var url = image;
img.src = url; //"http://www.corsproxy.com/" + url.replace(/https?:\/\//, "");
};
})(console);
app.js
angular.module('scottMeme', [])
.controller('AppCtrl', function ($scope) {
$scope.toptext = '';
$scope.bottomtext = '';
$scope.selectedMeme = 'Rudy';
$scope.memes = [];
for (var key in console.list) {
$scope.memes.push({ name: key, url: console.list[key] });
}
$scope.alterMeme = function() {
var url = $scope.memes[$scope.memes.indexOf($scope.selectedMeme)].name;
console.meme($scope.toptext, $scope.bottomtext, url);
}
$scope.create = function() {
var uri = document.getElementById('myCanvas').toDataURL();
downloadImage(uri, generateName());
}
function generateName() {
var n = [];
for (var i = 0; i < 10; i++) {
n.push((Math.floor(Math.random() * 16)).toString(16));
}
return n.join('');
};
function downloadImage(uri, name) {
var link = document.createElement('a');
link.download = name;
link.href = uri;
link.click();
};
}).run(function() {
console.meme('', '', 'Rudy');
});
Вы хотите разместить холст в i ts контейнер? – kosmos
Я хотел бы сохранить его на ширине s6 – texas697
Вы пытались установить '#myCanvas {width: 100%; } 'в css? – kosmos